create-react-app 开发环境中用代理解决 API 请求跨域问题

🌙
手机阅读
本文目录结构
axihe

开发环境中代理 API 请求

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

我们通常用相同的hostpost为前端 React 的项目提供后端服务。

例如,在部署应用程序之后,生产设置可能是这样的:

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

这样设置 不是必须的。

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

通过proxy设置代理

要告诉开发服务器在开发过程中向 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 选项对你来说不够灵活,你可以:

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

配置代理后出现 “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 路由匹配更灵活。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang