是否可以在 CRA 中设置与 package.json 不同的代理设置？例如使用 ENV 变量？
来自 CRA docs 声明
使用环境变量将正确的服务器主机和端口注入您的应用程序。
这句话是关于代理还是开发服务器本身？
【问题讨论】：
标签： reactjs proxy create-react-app
使用环境变量注入正确的服务器主机和端口 进入您的应用程序。
这既不是代理服务器也不是开发服务器。如果proxy 没有为您提供足够的灵活性（即，如果您需要使用http、https 或ws 以外的协议），这是关于如何处理每个环境的服务器设置的建议。例如，如果您的代码中有一个 api 调用，您可以使用环境变量来执行以下操作：
axios(process.env.REACT_APP_BASE_URL + endpoint, options).then(data=>{ console.dir(data); })
每个环境都有自己的REACT_APP_BASE_URL 定义。
package.json：不修改package.json是不可能影响代理设置的。
见Configuring the Proxy Manually (CRA docs)
package.json 是唯一记录在案的影响代理设置的方式。
您还可以看到line 96 of CRA's start.js。这种实现完全无法使用 ENV 变量将主机/端口注入 CRA 的代理设置。
说实话，这确实是我讨厌 CRA 的原因之一。在不受 CRA 限制的情况下，所有这些行为都非常容易处理。
npm run eject
所有这些问题都会立即消失...上面引用的start.js 脚本是一些被弹出的代码。所以你可以很容易地用 ENV vars 替换那些代理设置。
请务必在执行此操作之前为自己创建一个检查点，因为不会恢复弹出。
但是——如果你必须坚持使用 CRA——你CAN很容易使用环境变量修改package.json。
package.json：这基本上就是 CRA 对 REACT_APP_ 环境变量所做的事情（尽管它直接将它们注入到 process.env）。
package.json 只是一个大 JSON 对象，所以您需要做的就是在部署之前在服务器端解析它，将 "proxy" 值更新为 ENV 变量提供的值，保存文件，然后运行您的构建/部署。
这里有一个非常简单的例子来说明如何实现这一点，您只需要在部署之前在您仍然可以访问process.env 的上下文中运行此脚本：
const fs = require('fs');
// read/process package.json
const file = './package.json';
let pkg = JSON.parse(fs.readFileSync(file).toString());
// at this point you should have access to your ENV vars
pkg.proxy = `${process.env.HOST}:${process.env.PORT}`;
// the 2 enables pretty-printing and defines the number of spaces to use
fs.writeFileSync(pkg, JSON.stringify(file, null, 2));
我知道这并没有明确回答如何处理“没有 package.json”的问题，但我认为这不是必要的方法。
此外，这确实回答了 title 问题“如何在 Create React App Proxy 设置中使用 ENV 变量注入端口和主机？”
【讨论】：
注意：此功能适用于 react-scripts@2.0.0 及更高版本。
您现在可以手动配置代理。您需要先安装http-proxy-middleware。
npm install http-proxy-middleware --save
然后创建一个文件src/setupProxy.js，内容如下。
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // You can pass in an array too eg. ['/api', '/another/path']
createProxyMiddleware({
target: process.env.REACT_APP_PROXY_HOST,
changeOrigin: true,
})
);
};
您现在可以在.env 文件中添加代理，记住您需要REACT_APP_ 前缀，以便开发服务器获取环境变量。
REACT_APP_PROXY_HOST=http://localhost:5000
【讨论】：
是否可以在 CRA 中设置与 package.json 不同的代理设置？
没有。这不可能。好吧，至少现在还没有（2017/01/14）。
React 代理功能正在变得有点 complicated，因此，在 "advanced" proxy configuration 的简化完成后，将尽快实现从环境变量在 React 应用程序中设置代理的想法。
这句话是关于代理还是开发服务器本身？
这是关于开发服务器本身的。就目前而言，所有代理配置都在包文件中进行配置。
【讨论】：
您可以为端口和主机定义环境变量。
REACT_APP_PORT: "PORT of Application",
REACT_APP_HOST: "host of application"
要将所有环境注入您的应用程序，您可以使用webpack define plugin。
您需要在插件部分添加类似。
const env = require("path to your env file")
//other webpack settings
plugins: {
//plugins
new webpack.DefinePlugin(env)
}
现在，如果您看到 code of create-react-app，它会首先在 env 变量中查找 port 和 host。
另外，请注意
您必须创建以
REACT_APP_开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免意外暴露机器上可能具有相同名称的私钥
【讨论】：
env 变量是否用于代理而不是用于运行应用程序本身？