开发中代理 API 请求

注意：此功能在 [email protected] 及更高版本中可用。

人们经常将前端 React 应用与后端实现从同一个主机和端口提供服务。

例如，部署应用程序后，生产环境可能如下所示

/             - static server returns index.html with React app
/todos        - static server returns index.html with React app
/api/todos    - server handles any /api/* requests using the backend implementation

这种设置不是必需的。但是，如果你确实有这样的设置，在开发过程中，编写像 fetch('/api/todos') 这样的请求会很方便，而无需担心将它们重定向到另一个主机或端口。

要告诉开发服务器在开发过程中将任何未知请求代理到你的 API 服务器，请在你的 package.json 中添加一个 proxy 字段，例如

  "proxy": "https://127.0.0.1:4000",

这样，当你在开发环境中使用 `fetch('/api/todos')` 时，开发服务器会识别出它不是静态资源，并将你的请求代理到 `https://127.0.0.1:4000/api/todos` 作为备用。开发服务器**只**会尝试将 `Accept` 头部中不包含 `text/html` 的请求发送到代理。

方便的是，这避免了 CORS 问题以及开发环境中出现的类似错误消息

Fetch API cannot load https://127.0.0.1:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://127.0.0.1:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

请记住，`proxy` 仅在开发环境（使用 `npm start`）中有效，你需要确保像 `api/todos` 这样的 URL 在生产环境中指向正确的位置。你不需要使用 `/api` 前缀。任何没有 `text/html` 接受头的未识别请求将被重定向到指定的 `proxy`。

proxy 选项支持 HTTP、HTTPS 和 WebSocket 连接。

如果 `proxy` 选项对你来说不够灵活，你可以选择

自己配置代理
在你的服务器上启用 CORS（这里是如何为 Express 做到的）。
使用环境变量将正确的服务器主机和端口注入到你的应用程序中。

"Invalid Host Header" 错误在配置代理后

当你启用 `proxy` 选项时，你选择了一个更严格的主机检查集。这是必要的，因为将后端开放给远程主机会使你的计算机容易受到 DNS 重绑定攻击。这个问题在这篇文章和这个问题中有解释。

这在 `localhost` 上开发时应该不会影响你，但如果你像这里描述的那样在远程开发，你将在启用 `proxy` 选项后在浏览器中看到这个错误

无效的主机头

为了解决这个问题，你可以在项目的根目录中创建一个名为 `.env.development` 的文件，并在其中指定你的公共开发主机

HOST=mypublicdevhost.com

如果你现在重新启动开发服务器并从指定的主机加载应用程序，它应该可以工作。

如果您仍然遇到问题，或者您正在使用更奇特的环境（例如云编辑器），您可以通过在 .env.development.local 中添加一行来完全绕过主机检查。请注意，这很危险，会使您的机器暴露于来自恶意网站的远程代码执行：

# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true

我们不建议使用这种方法。

手动配置代理

注意：此功能适用于 [email protected] 及更高版本。

如果 proxy 选项对您来说不够灵活，您可以直接访问 Express 应用程序实例并连接您自己的代理中间件。

您可以将此功能与 package.json 中的 proxy 属性结合使用，但建议您将所有逻辑整合到 src/setupProxy.js 中。

首先，使用 npm 或 Yarn 安装 http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

接下来，创建 src/setupProxy.js 并将以下内容放入其中

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

module.exports = function(app) {
  // ...
};

您现在可以根据需要注册代理！以下是如何使用上述 http-proxy-middleware 的示例

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://127.0.0.1:5000',
      changeOrigin: true,
    })
  );
};

注意：您不需要在任何地方导入此文件。当您启动开发服务器时，它会自动注册。

注意：此文件仅支持 Node 的 JavaScript 语法。请确保只使用支持的语言特性（即不支持 Flow、ES 模块等）。

注意：将路径传递给代理函数允许您对路径使用通配符和/或模式匹配，这比 express 路由匹配更灵活。

"Invalid Host Header" 错误在配置代理后​

手动配置代理​

"Invalid Host Header" 错误在配置代理后

手动配置代理