http 代理中间件未在我的反应应用程序中创建代理答案

【问题标题】：http proxy middleware is not created proxies in my react apphttp 代理中间件未在我的反应应用程序中创建代理
【发布时间】：2020-11-02 20:06:19
【问题描述】：

我正在我的 react 应用程序中实现 http 代理中间件。我想从本地代理 qa 或开发后端服务 url。

下面我的开发登录网址示例

https://cors-anywhere.herokuapp.com/https://dev.sju.uk/auth/login

我的 setupProxy.js

module.exports = function (app) {
  app.use('/auth/login' ,createProxyMiddleware({
    target: 'https://cors-anywhere.herokuapp.com/https://dev.sju.uk/auth/login',
    changeOrigin: true,
  })
  );
};

我启动了我的应用程序并单击登录按钮，请求失败并出现 404 not found 错误。不知道为什么我的目标没有用我实际的http://localhost:9009/auth/login uri 替换为 https://cors-anywhere.herokuapp.com/https://dev.sju.uk/auth/login。

当我们也收到npm start 时，也没有收到proxy created message in my console。我使用的是 webpack 开发服务器而不是 react-scripts 。如果 webpack 方面需要任何更改，或者我是否遗漏了任何东西，请告诉我。我尝试了小型 poc，它成功了，但这很简单，没有 herokuapp 的东西。

【问题讨论】：

你用这个做代理？ - cors-anywhere.herokuapp.com 在这种情况下，服务器不知道您的“本地主机”是什么，这就是失败的原因。您的选择是在本地启动此代理服务器（或使您的服务器公开可用），您可以这样做 - github.com/Rob--W/cors-anywhere
@NikitaChayka 不，我没有使用代理值作为``` cors-anywhere.herokuapp.com``，上面提到了package.json。
无论如何我可能在这里遗漏了一些东西，但我不太明白你希望一些外部服务器如何知道你的“本地主机”是什么
对不起，我不明白 :( 也许其他人可以帮助你解决这个问题
@NikitaChayka 我修改了我的问题，你可以检查一下。它可能会提供适当的需求

标签： reactjs http-proxy-middleware

【解决方案1】：

我花了一些时间来了解 http-proxy-middleware 的工作原理。

从http-proxy-middlewareDocs看下图

     foo://example.com:8042/over/there?name=ferret#nose
     \_/   \______________/\_________/ \_________/ \__/
      |           |            |            |        |
   scheme     authority       path        query   fragment

对于简单的配置，您的前端调用 API 的任何请求都会被上图路径部分上的匹配模式观察到，并被您的目标配置覆盖，在请求的标头中作为不同的网址。这也有助于您在本地开发阶段避免浏览器的 CORS 阻塞机制。

示例：假设我们需要从暴露在 http://localhost:3000 的前端调用位于 https://localhost:7005/api/WeatherForecast 的端点

CORS 将在所有浏览器中阻止此类调用。

因此，通过以下配置，您将能够绕过 cors 问题。

const { createProxyMiddleware } = require('http-proxy-middleware');

const context = [
    "/api",
];

module.exports = function (app) {

    const webApiProxy = createProxyMiddleware(context[0], {
        target: 'https://localhost:7005',
        secure: false,
        changeOrigin: true,
        headers: {
            Connection: 'Keep-Alive'
        },
        logLevel: 'debug'
    });

    app.use(webApiProxy);
};

这样，从 http://localhost:3000 发出的任何请求都将被代理中间件拦截，如果它在路径的某些部分找到 /api，则将更改为 https://localhost:7005/ api 并在 /api 之后连接原始路径的其余部分。

所以最后，你的前端会从 http://localhost:3000 询问事情，但是所有的请求都会到达 https://localhost:7005，就好像它们是由 https://localhost:7005 请求的一样这将解决 Cors 问题，因为您的请求和响应来自同一来源。

我猜你可以通过这样编写配置来解决你的问题：

module.exports = function (app) {
  app.use('/auth/login' ,createProxyMiddleware({
    target: 'https://dev.sju.uk/auth/login',
    changeOrigin: true,
    headers: {
       Connection: 'Keep-Alive'
    },
  })
  );
};

请记住，这个库不仅可以帮助您解决 CORS 问题，还可以为任何请求/响应执行数百项操作，例如更改正文中的参数、向正文中添加内容、添加标头、在请求也就是记录请求的内容，对响应执行操作，也就是再次记录返回的内容，等等。

希望这将有助于解决您的问题！

【讨论】：