在包中设置代理.Json到env变量

我需要在运行时设置package.json中的proxy值，就像使用环境变量一样。这是怎么做到的呢?

// package.json
{
  "name": "demo",
  "proxy": process.env.MY_PROXY_VAL , // <- how?
  "dependencies": {},
  "scripts": {},
}

谢谢。

它会自动从HTTPS_PROXY或HTTP_PROXY读取，所以你不需要这样做。

From the docs:

用于传出https请求的代理。如果设置了HTTPS_PROXY或HTTPS_PROXY或HTTP_PROXY或HTTP_PROXY环境变量，则底层请求库将遵循代理设置。

所以我把我的评论变成一个答案，因为我认为指出这个问题的实际解决方案是很重要的。

我正在寻找完全相同的答案，并尝试通过.env文件设置HTTP_PROXY和HTTPS_PROXY变量，也直接从脚本内。然而，这并不能解决问题，因为这将覆盖本地机器的系统代理设置，我不认为OP打算这样做。结果可能是你无法再加载npm包，因为不正确的系统代理设置。

相反，有一种方法可以在开发中手动配置CRA的代理，正如官方文档所指出的那样:https://create-react-app.dev/docs/proxying-api-requests-in-development/configuring-the-proxy-manually 这样，您应该在项目的/src文件夹下创建一个本地setupProxy.js文件，该文件将覆盖package.json中的代理集。当然，你必须确保所有的路径都是正确设置的，但它工作得很好，你可以细粒度地控制应用程序中的哪些页面将被代理，哪些不会。

针对您关于如何通过环境变量设置代理的问题，这里有一个示例，您可以使用setupProxy方法和createProxyMiddleware:

// Sample of how to setup a proxy middleware with environment variables
//// file: <project_root>/src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/rest',
    createProxyMiddleware({
      target: process.env.REACT_APP_PROXY_HOST,
      changeOrigin: true,
    })
  );
};

//// file: <project_root>/.env
REACT_APP_PROXY_HOST=https://localhost:6700

在本例中，我只想代理针对/rest端点的请求，为此我创建了一个新端点。所有其他请求仍然会转到默认的localhost:3000 Url，为react应用提供服务。

主机通过环境变量REACT_APP_PROXY_HOST定义。我在本地.env文件中定义了这个变量，但如果需要，您也可以在package.json的脚本中直接设置它。

:尽管最初的问题已经为我解决了，但我有一个额外的问题，试图将请求转发到运行在https上的服务器。以前的开发设置对于package.json中的静态代理集已经很好了。但是，当使用createProxyMiddleware并以使用证书运行在https上的服务器为目标时，必须提供所使用证书的路径。

// Sample of how to setup a proxy middleware with environment variables 
// targeting a server running on https
//// file: <project_root>/src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
const fs = require('fs');
const protocol = JSON.parse(process.env.HTTPS) ? "https:" : "http:";
const host = process.env.REACT_APP_PROXY_HOST
const port = process.env.REACT_APP_PROXY_PORT
module.exports = function(app) {
  app.use(
    '/rest',
    createProxyMiddleware({
      target: {
        protocol: protocol,
        host: host,
        port: port,
        pfx: fs.readFileSync('src/root-cert.pem')
      },
      changeOrigin: true,
    })
  );
};

//// file: <project_root>/.env
HTTPS=true
REACT_APP_PROXY_HOST=localhost
REACT_APP_PROXY_PORT=6700

在这种情况下，不应将目标作为字符串提供，而应将其作为包含protocol, host, port和属性pfx的对象给出，其中包含通过https验证服务器的证书。在本例中，它是项目源目录中的硬编码路径，但是也可以使用环境变量设置它。

设置HTTPS=true覆盖默认的开发设置，并且默认情况下将在https://localhost:3000启动开发服务器。通过此设置以及提供正确的证书，可以访问运行在https上的服务器，而不会出现问题。

作为参考，此解决方案在http-proxy-middleware和底层node-http-proxy的文档中有正式链接:

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/https.md
https://github.com/http-party/node-http-proxy http——https-using-a-pkcs12-client-certificate

这个问题在其他地方也得到了一些关注，例如

https://github.com/facebook/create-react-app/issues/3783
https://github.com/facebook/create-react-app/issues/4288
https://github.com/usc-isi-i2/kgtk-browser/issues/32

希望帮助寻找同样问题的人，如果有任何更新或事情变化，请随时在评论中添加建议。

相关内容

最新更新

热门标签：