问题描述
我正在从ASP.Net Core React模板构建一个Web应用程序,该模板的“ ClientApp” React部分似乎是一个“ create-react-app”项目。当我将应用程序部署到IIS时,它会从根目录托管在一个子文件夹中,即http://myserver.com/SubApp
。因此,我将package.json中的“主页”值更改为http://myserver.com/SubApp
。
我现在遇到的问题是,当我在本地javascript代码中进行fetch
调用时,如果我使用fetch('/myendpoint')
,则本地请求的url是https://localhost:44315/myendpoint
(有效) ,但在部署后,该网址将变为http://myserver.com/myendpoint
,该网址不起作用。
相反,当我设置结尾fetch('myendpoint')
(没有斜杠)时,服务器请求正确的URL http://myserver.com/SubApp/myendpoint
,但是本地主机获取了错误的URL https://localhost:44315/SubApp/myendpoint
。
我知道前导斜杠是从根发出请求的,但是本地主机和服务器上的根似乎不同。
出于本地调试的目的,我尝试将package.json中的代理设置为https://localhost:44315
,以便希望fetch('myendpoint')
(不使用斜杠)在我的本地环境中有效,但是当我尝试此操作时,chrome提示我重复登录但从未成功进行请求。
我觉得自己快要到了,但是我一定想念一些东西。如何配置我的package.json(或其他项目配置),以使获取命令在本地主机和服务器上均成功执行,而又不会像在每次获取之前检查javascript代码中的URL那样令人讨厌?
解决方法
我也有同样的经历,发现在package.json中设置主页值是一个死胡同。您要做的是利用PUBLIC_URL环境变量在.env
中设置完整的绝对URL。可能有一种使用相对URL的方法,但是在某些极端情况下,它使得使用绝对URL更加整洁。
设置此环境变量时,要在以下位置使用它:
- 您的路线(如果您使用React Router)
- 路径应以
process.env.PUBLIC_URL
开头
- 路径应以
- 您的内部链接也应以env var为前缀。
您需要的是Proxying API Requests in Development。
它可以轻松地调用开发中的任何端点并将其转发到后端或其他位置,而不会出现CORS问题或端点不匹配的问题。
您将必须使用手动配置选项,因为默认的proxy
设置仅有助于主机/端口转发。
将http-proxy-middleware
安装为开发依赖项:
$ npm -i http-proxy-middleware --save-dev
按照上面链接的指南,您可以使用以下配置:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/SubApp/*',createProxyMiddleware({
target: 'localhost://44315',// or anything else,point to your dev backend
pathRewrite: {
'^/SubApp': '/',// remove base path
},})
);
};
然后可以在请求中的/SubApp
部分进行获取,该部分将在开发中删除。您可以使用其他配置来实现这一点,这是一个示例。