将 Create React App 部署到子目录但对父路径进行 API 调用

Question

我正在将我的 Create React App 部署到更大的非 React webapp 中的特定路径。例如，我会说 webapp 路径是 www.example.com，而 React 应用程序部署在 www.example.com/react/

我通过将 React 应用程序的 package.json 中的“主页”属性设置为 "homepage": "/react" 来完成此操作，这确实可以从我的服务器上的 /react/ 路径正确地提供静态文件。

但是，当我从我的 react 应用程序进行 API 调用时，它们会转到 /react/api/etc 而不是 /api/etc。

我可以将 axios 配置为使用硬编码的基本路径 www.example.com，但我将其部署到具有不同 URL 的多个环境中，并且需要一个不依赖硬编码值的解决方案。

我也可以在服务器端编写一个解决方法，但它会不太干净/混乱我的日志记录和请求统计信息。

如果存在，我希望有一个干净的解决方案。

Answer 1

如果您在 axios 配置对象中使用 window.location 属性会怎样：

{
  baseURL: `${location.hostname}/api/` // or window.location.hostname
}