React 构建不适用于 axios 代理答案

【问题标题】：React build doesn't work with axios proxyReact 构建不适用于 axios 代理
【发布时间】：2021-04-08 18:38:58
【问题描述】：

我的问题是：

我已经构建了一个 MERN 堆栈应用程序。我有 nodejs 应用程序连接到部署在 GCP 中的 VM 上的 mongodb 地图集。一切正常，这个虚拟机在http://35.240.91.193:5000 上处理请求。您可能会看到它转到http://35.240.91.193:5000/api/profile。

我的客户端应用程序是使用 React 构建的，并通过 axios 调用创建与 nodejs 应用程序的连接。它通过 package.json 中设置为 {"proxy": "http://35.240.91.193:5000"} 的“代理”属性工作。当我以开发模式（npm start）运行客户端应用程序时，一切正常，但是当我运行 npm run build 并使用 nginx（本地或远程）部署构建包时，连接请求不起作用。通过开发工具中的网络选项卡，我看到请求没有通过代理，而是“http://client_host/api/profile”，但它应该是“http://35.240.91.193:5000/api/profile”。

这是客户端代码 https://github.com/GeorgeFalkovich/csc_fe

【问题讨论】：

标签： node.js reactjs mongodb

【解决方案1】：

package.json 中的代理仅在 dev 模式下工作，在生产中假设前端和 api 服务器位于同一服务器上，您可以通过 axios 像这样添加基本 URL 来解决此问题

if(process.env.NODE_ENV !== "development") {
    axios.defaults.baseURL = 'BASE URL TO YOUR API';
}

将此代码放在任何 axios 请求之前。

【讨论】：

您好 Shmili，感谢您的回答。虽然您的回答向我展示了我的应用程序仍然无法运行的故障原因。放置 axios.defaults.baseURL 后，它显示它发出了正确的请求，但 CORS 错误仍然阻止了我在构建生产中的所有 axios 请求。知道如何在没有浏览器特殊插件但在生产环境中处理它的情况下处理它吗？我必须创建一个 VM nodejs-mongodb 和 3 个客户端反应 VM。谢谢

【解决方案2】：

问题已通过添加解决

if(process.env.NODE_ENV !== "development") {
    axios.defaults.baseURL = 'BASE URL TO YOUR API';
}

在调用任何 axios 请求之前到我的客户端应用程序

并将中间件（npm install）cors 添加到我的 nodejs 服务器文件中

app.use(cors());

【讨论】：