create-react-app 开发环境中用代理解决 API 请求跨域问题
开发环境中代理 API 请求
注意：此功能适用于 react-scripts@0.2.3 及更高版本。
我们通常用相同的host和post为前端 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 将解释该问题。
- https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
- https://github.com/webpack/webpack-dev-server/issues/887
在 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 路由匹配更灵活。
