连接 react 前端和 express 后端答案

【问题标题】：Connecting react front end and express backend连接 react 前端和 express 后端
【发布时间】：2020-12-03 09:45:15
【问题描述】：

开发版本运行良好，我的 react 应用程序在端口 3000 上，服务器在端口 8080 上。前端能够向后端发出请求并获得响应。但是在部署生产构建时，应用程序在端口 5000 上启动并呈现静态文件。但是前端无法访问 localhost:8080/api/:id 因为该端口未“打开”。任何帮助将不胜感激。

【问题讨论】：

标签： javascript node.js reactjs express

【解决方案1】：

您可以使用dotenv 定义自定义配置变量和cross-env 包为您的反应应用程序定义环境。首先安装这些包。

yarn add dotenv && yarn add cross-env --dev

或

npm i dotenv && npm i cross-env --dev

您需要创建两个单独的 .env 配置文件，分别命名为 .env.development 和 .env.production。您的 env 文件可能包含以下内容：

.env.development

API_URL="localhost:8080"

.env.production

API_URL="localhost:5000"

现在在您的 react 的 main.js 文件（或您命名的文件）上，只需导入 dotenv 包，如下所示：

// other imports here
require('dotenv').config({ 
  path: process.env.NODE_ENV === 'production' ? '/path/to/.env.production' : '/path/to/.env.development'
})

现在，在您的 package.json 上，更改 start 和 build 脚本，如下所示：

{
  ...
  "scripts": {
    "start": "cross-env NODE_ENV=development react-scripts start",
    "build": "cross-env NODE_ENV=production react-scripts build",
    ...
  }
  ...
}

最后，无论您在哪里使用 API URL：

示例

axios.post(`${process.env.API_URL}/your/path`) // or any other way to join URL and path
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

希望它有助于解决您的问题。

【讨论】：

【解决方案2】：

从您的所有routes 中删除localhost:8080 并直接向/api/ 发出请求，因为一切都在5000 的一个端口下运行。您可能需要通过所做的更改重新构建前端

【讨论】：