我需要在运行时设置package.json中的proxy值,就像使用环境变量一样。这怎么可能呢?
package.json
proxy
// package.json { "name": "demo", "proxy": process.env.MY_PROXY_VAL , // <- how? "dependencies": {}, "scripts": {}, }
字符串
qvsjd97n1#
它会自动从HTTPS_PROXY或HTTP_PROXY读取,所以你不需要这样做。从文档:用于传出https请求的代理。如果设置了HTTPS_PROXY或https_proxy或HTTP_PROXY或http_proxy环境变量,则底层请求库将支持代理设置。
HTTPS_PROXY
HTTP_PROXY
sgtfey8w2#
所以我把我的评论转换成一个答案,因为我认为指出这个问题的实际解决方案很重要。我正在寻找完全相同的答案,并尝试通过.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方法的示例:
/src
setupProxy.js
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的脚本中设置它。
/rest
localhost:3000
REACT_APP_PROXY_HOST
.env
更新:虽然原来的问题已经解决了,但我在尝试将请求转发到运行在https上的服务器时遇到了额外的问题。以前的开发设置对于package.json中的静态代理集是很好的。但是,当使用createProxyMiddleware并以在https上运行的具有证书的服务器为目标时,必须提供所用证书的路径。
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的文档中有官方链接:
protocol
host
port
pfx
HTTPS=true
https://localhost:3000
http-proxy-middleware
node-http-proxy
这个问题在其他地方也得到了一些关注,例如。
希望能帮助寻找同样问题的人,如果有任何更新或事情的变化,请随时在评论中添加建议。
2条答案
按热度按时间qvsjd97n1#
它会自动从
HTTPS_PROXY
或HTTP_PROXY
读取,所以你不需要这样做。从文档:
用于传出https请求的代理。如果设置了HTTPS_PROXY或https_proxy或HTTP_PROXY或http_proxy环境变量,则底层请求库将支持代理设置。
sgtfey8w2#
所以我把我的评论转换成一个答案,因为我认为指出这个问题的实际解决方案很重要。
我正在寻找完全相同的答案,并尝试通过.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
方法的示例:字符串
在本例中,我只想代理指向
/rest
端点的请求,为此我创建了一个新端点。所有其他请求仍然会转到默认的localhost:3000
URL,为react应用提供服务。主机通过环境变量
REACT_APP_PROXY_HOST
定义。我在本地.env
文件中定义了这个变量,但是如果需要,您也可以直接在package.json
的脚本中设置它。更新:虽然原来的问题已经解决了,但我在尝试将请求转发到运行在
https
上的服务器时遇到了额外的问题。以前的开发设置对于package.json
中的静态代理集是很好的。但是,当使用createProxyMiddleware
并以在https上运行的具有证书的服务器为目标时,必须提供所用证书的路径。型
在这种情况下,不应将目标作为字符串提供,而应将其作为包含
protocol
、host
、port
和属性pfx
的对象提供,该属性包含通过https验证服务器的证书。在本例中,它是项目源目录中的硬编码路径,但也可以使用环境变量设置。设置
HTTPS=true
将覆盖默认的开发设置,并默认在https://localhost:3000
启动开发服务器。通过此设置以及提供正确的证书,可以毫无问题地访问在https上运行的服务器。作为参考,此解决方案在
http-proxy-middleware
和底层node-http-proxy
的文档中有官方链接:这个问题在其他地方也得到了一些关注,例如。
希望能帮助寻找同样问题的人,如果有任何更新或事情的变化,请随时在评论中添加建议。