Localhost与已部署之间的基本URL差异-create-react-app

如何解决Localhost与已部署之间的基本URL差异-create-react-app

我正在从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部分进行获取，该部分将在开发中删除。您可以使用其他配置来实现这一点，这是一个示例。