在 React/Express 应用程序的生产中代理 api 请求

我正在使用独立的存储库（后端和前端）开发一个 MERN-stack 项目，在发展环境中，我使用“代理”将服务器 API 与 React 连接，并且运行良好。

//package.json in react
{
...
"proxy": "http://localhost:8000/",
...
}

但是当我切换到生产环境并用已部署的链接替换代理值，不再支持“代理”。我对此进行了搜索，发现它仅适用于开发环境，并且我尝试了在互联网上找到的几种解决方案，但没有运气！

顺便说一下，我使用 Heroku 部署后端，使用 Netlify 部署前端。目前，两者都已部署，没有任何错误，但后端和前端之间没有连接。

在生产中我们不能使用（代理）。相反，我们可以在前端为后端 URL 设置一个变量，反之亦然。

让我们从backend配置：

app.use(cors({ 
   origin: "frontend_URL", 
   credentials: true 
  }));

现在，让我们看看frontend config:

在您喜欢的任何地方设置变量：

export const API_URL = "URL";

在调用 API 的文件中：

import axios from "axios";
import { API_URL } from "./your/path";
axios.defaults.withCredentials = true;

axios.get(`${API_URL}/your/route`);

现在您已准备好部署...