Base URL Localhost 和 Deployed 之间的差异 - create-react-app

Question

我正在从 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（有效），但在部署时，此 url 变为 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 这样的骇人听闻的事情每次抓取？

Answer 1

我也有过同样的经历，发现在package.json中设置主页值是死胡同。你想要做的是利用 PUBLIC_URL 环境变量在你的 .env 中设置一个完整的绝对 url 。可能有一种使用相对 url 的方法，但有一些边缘情况使使用绝对 URL.

变得更干净

设置此环境变量后，您希望在以下位置使用它：

你的路线（如果你使用反应路由器）
- 路径应以process.env.PUBLIC_URL
您的内部链接也应该以环境变量为前缀。

Answer 2

你需要的是Proxying API Requests in Development.

它可以让您轻松调用开发中的任何端点并将其转发到您的后端或其他位置，而不会出现 CORS 问题或端点不匹配的问题。

您必须使用手动配置选项，因为默认 proxy 设置仅有助于 host/port 转发。

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

Base URL Localhost 和 Deployed 之间的差异 - create-react-app

Base URL Discrepancy Between Localhost and Deployed - create-react-app

reactjs

asp.net-core

create-react-app