在生产环境中为 React/Express 应用代理 api 请求答案

【问题标题】：Proxying api requests in production for React/Express app在生产环境中为 React/Express 应用代理 api 请求
【发布时间】：2021-12-25 13:43:49
【问题描述】：

我正在使用分离的存储库（后端和前端）开发一个 MERN 堆栈项目，在开发环境中，我使用“代理”将服务器 API 与 react 连接起来，它是完美运行。

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

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

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

【问题讨论】：

【解决方案1】：

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

让我们从后端配置开始：

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

现在，让我们看看前端配置：

在任何你喜欢的地方设置一个变量：

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`);

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

【讨论】：