如何连接React应用与Express API？新手项目问题求助

1. 定位React项目的真实目录 #

你执行cd pawsforever提示找不到目录，先确认React项目的实际位置：

• 在当前终端执行对应命令查看所有文件和文件夹：
  • Mac/Linux：ls -la
  • Windows：dir
    找到React项目对应的正确文件夹名称（可能存在拼写错误，比如paws-forever），再用cd 正确目录名进入。

2. 移除React中的错误代码 #

你在React的index.js里添加的Express代码完全没必要——React是前端项目，不需要在其中编写后端服务逻辑，这段代码应该放到你的Express后端项目的入口文件（如server.js）中，直接删除React里的这段代码即可。

3. 解决端口冲突问题 #

Express和React默认都使用3000端口，启动其中一个后另一个会被占用，修改任意一方的端口即可：

方案1：修改Express端口 #

打开后端项目的入口文件，把端口改为3001：

const port = 3001; // 将3000替换为3001

重启Express服务，此时后端运行在localhost:3001。

方案2：修改React端口 #

在React项目的终端中，启动时临时指定端口：

• Mac/Linux：PORT=3001 npm start
• Windows（cmd）：set PORT=3001 && npm start
• Windows（PowerShell）：$env:PORT=3001; npm start
  这样React会运行在localhost:3001，Express继续使用3000端口。

4. 同时启动前后端服务 #

需要打开两个独立的终端窗口：

1. 第一个终端：进入Express后端目录，执行npm start启动后端服务。
2. 第二个终端：进入React项目目录，执行npm start启动前端服务。

5. 配置前后端通信代理 #

为了让前端请求后端时无需写全路径，在React项目的package.json中添加proxy字段：

{
  "name": "pawsforever",
  // ...其他原有配置
  "proxy": "http://localhost:3001" // 填写你的后端服务地址
}

配置后，在React中发送请求（如fetch('/api/pets')）时，会自动转发到http://localhost:3001/api/pets。

6. 合并项目结构（可选） #

如果不想维护两个独立目录，可以把后端代码放到React项目根目录下的server文件夹中，然后修改根目录package.json的脚本：

{
  "scripts": {
    "start": "react-scripts start",
    "server": "node server/server.js",
    "dev": "concurrently \"npm start\" \"npm run server\""
  }
}

安装concurrently依赖后，执行npm run dev就能同时启动前后端服务。

内容的提问来源于stack exchange，提问作者IsabelleNM