Question

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

Answer 1

您可以使用dotenv来定义自定义配置变量，并使用cross-env包来为React应用程序定义环境。首先安装这些软件包。

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

或

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

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

.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);
  });

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

Answer 2

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

连接React前端和Express后端

2 个答案: