Edit

在开发环境中代理 API 请求

注意：此功能适用于 react-scripts@0.2.3 及更高版本。

人们通常从相同的主机和端口为前端React应用程序提供后端实现。
例如，在部署应用程序之后，生产设置可能是这样的：

/             - 静态服务器返回 index.html
/todos        - 静态服务器返回 index.html
/api/todos    - 通过后端实现处理任何 /api/* 请求

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

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

  "proxy": "http://localhost:4000",

这样，当你在开发中使用 fetch('/api/todos') 时，开发服务器将识别出它不是静态资源，并将你的请求代理到http://localhost:4000/api/todos 作为后备。开发服务器将 仅仅 尝试将 Accept 头中没有 text/html 的请求发送到代理。

这样很方便，可以避免开发环境中的 CORS(跨域) issues和错误消息：

Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost: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 accept 标头的任何无法识别的请求都将被重定向到指定的 proxy（代理服务器）。

proxy 选项支持 HTTP ，HTTPS 和 WebSocket 连接。
如果 proxy 选项对你来说不够灵活，你可以：

配置代理后出现 "Invalid Host Header"(无效主机标头) 错误

启用 proxy 选项后，你将选择更严格的主机检查集。这是必要的，因为将后端打开到远程主机会使你的计算机容易受到 DNS 重新绑定攻击。这篇文章 和 这个 issue 将解释该问题。

在 localhost 上进行开发时这不会受到影响，但如果你像 此处所述 进行远程开发，则在启用proxy选项后，你将在浏览器中看到此错误：

Invalid Host header

要解决此问题，你可以在项目根目录中名为 .env.development 的文件中指定公共开发主机：

HOST=mypublicdevhost.com

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

如果仍然存在问题，或者正在使用云编辑器之类的更奇特的环境，可以通过向 .env.development.local 添加一行代码来完全绕过主机检查。 请注意，这是危险的，并使你的计算机暴露于恶意网站，实行远程代码执行攻击：

# 注意: 这是非常危险的
# 它会使你的计算机受到你所访问网站的攻击。
DANGEROUSLY_DISABLE_HOST_CHECK=true

我们不推荐这种方法。

手动配置代理

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

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

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

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

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

接下来，创建 src/setupProxy.js 并将以下内容放入该文件中：

const proxy = require('http-proxy-middleware');

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

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

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

注意： 你无需在任何位置导入此文件。 它在启动开发服务器时会自动注册。

注意： 此文件仅支持 Node 的 JavaScript 语法。 请务必仅使用支持的语言特性（即不支持 Flow ，ES Modules 等）。

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

← PreviousNext →