reactjs - 在 React/Express 应用程序的生产环境中代理 API 请求

Question

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

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

但是当我切换到生产环境并将代理值替换为已部署的链接时，不再支持“代理”。我搜索了一下，发现它只适用于开发环境，我尝试了在互联网上找到的几种解决方案，但没有成功!

顺便说一下，我正在用 Heroku 部署后端，用 Netlify 部署前端。现在，两者都部署无误，但后端和前端之间没有连接。

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

---

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