阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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

      开发环境中代理 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 路由匹配更灵活。

      目录
      目录