连接react前端和express后端

提问者：小点点

连接react前端和express后端

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

共2个答案

匿名用户

您可以使用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文件可能包含如下内容:

。环境。发展

API_URL="localhost:8080"

。环境。生产

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上，将启动和构建脚本改为这样:

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

希望能帮你解决问题。

匿名用户

从您的所有路由中删除localhost:8080并向/api/发出直接请求，因为所有内容都在一个端口下运行，该端口是5000。您可能需要使用所做的更改重新构建前端