logo标签列表

将package.json中的代理设置为环境变量

node.jsnpm
17

我需要在运行时设置package.json中的proxy值，例如使用环境变量。如何做到这一点？

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

谢谢。

2个回答
9
它将自动从HTTPS_PROXY或HTTP_PROXY读取，所以你不需要这样做。
来自docs：
引用： 对于发出的https请求使用的代理。如果设置了HTTPS_PROXY或https_proxy或HTTP_PROXY或http_proxy环境变量，则底层请求库将遵守代理设置。
6
对我来说似乎不起作用。我已经从我的package json中删除了 "proxy": "http://localhost:3002/qat"，并在我的.env文件中添加了```HTTP_PROXY=http://localhost:3002/qat/ HTTPS_PROXY=http://localhost:3002/qat/```但是添加HTTP和/或HTTPS其中之一都不能让我的API调用到达后端服务。终点上得到404错误。 - Sigex
1
这在我的情况下不起作用，你能帮我吗？我已经设置了环境变量，但仍然抛出404错误。 - Md. Parvez Alam
4
如果你使用了create-react-app，这种方法不起作用。 (https://github.com/facebook/create-react-app/issues/1640#issuecomment-328475314) - Camilo
此答案含糊不清，因为设置HTTP_PROXY或HTTPS_PROXY变量会覆盖您本地机器的系统代理设置，这显然不是OP想要的。我知道的唯一有效选项是手动在setupProxy.js脚本中定义代理设置，如此处所述：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually - aegger
4
所以我将我的评论转换成了一个答案，因为我认为指出这个问题的实际解决方案非常重要。
我正在寻找完全相同的答案，并尝试通过.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

在这种情况下，目标不应该作为字符串提供，而应该作为一个包含协议、主机、端口和一个属性pfx的对象给出，其中包含通过https验证服务器的证书。 在这种情况下，它是项目源目录中的硬编码路径，但也可以使用环境变量进行设置。
设置HTTPS=true会覆盖默认的开发设置，并默认情况下启动开发服务器在https://localhost:3000。 通过提供正确的证书和此设置，运行在https上的服务器可以无问题地访问。
值得一提的是，这个解决方案在http-proxy-middleware和底层的node-http-proxy文档中都有官方链接。 这个问题在其他地方也受到了关注，例如： 希望能帮助那些寻找同样问题的人，如果有任何更新或变化，请在评论中添加建议。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接