Create React App 在开发环境中代理 API 请求

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

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

-             - ------- ----------
------        - ------- ----------
----------    - ---------- ------ --

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

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

  -------- ------------------------

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

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

----- --- ------ ---- -------------------------------- -- ----------------------------- ------ -- ------- -- --- --------- --------- ------ ----------------------- -- --------- --- ------- ------- -- -- ------ -------- ------ ---- ------ --- --- --------- ---- -- --------- -- ----- --- -------- ---- ---- ---------

请记住,proxy 只在开发环境中有效(使用 npm start ),并且你应该确保像 /api/todos 这样的 URL 在生产环境中指向正确的地址。你不必使用 /api 前缀。没有 text/html accept 标头的任何无法识别的请求都将被重定向到指定的 proxy(代理服务器)。

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

  • 自己配置代理
  • 在你的服务器上启用CORS(如何为 Express 执行此操作)。
  • 使用 环境变量 将正确的服务器主机和端口注入你的应用程序。

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

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

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

Invalid Host header

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

------------------------

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

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

- --- -------
- --------------------
-----------------------------------

我们不推荐这种方法。

手动配置代理

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

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

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

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

- --- ------- --------------------- ------
- - -
- ---- --- ---------------------

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

----- ----- - ---------------------------------

-------------- - ------------- -
  -- ---
--

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

----- ----- - ---------------------------------

-------------- - ------------- -
  --------------------- - ------- ------------------------ ----
--

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

注意: 此文件仅支持 Node 的 JavaScript 语法。 请务必仅使用支持的语言特性(即不支持 Flow ,ES Modules 等)。

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


上一篇:调试测试
下一篇:使用AJAX请求获取数据