如何修复Node与React的连接问题以让登录页面正常运行？

核心错误原因 #

• 请求方法不匹配：后端/api路由仅支持GET请求，前端登录逻辑发起的是POST请求，直接触发404状态码
• 跨服务端口不匹配：Express服务运行在8080端口，React前端默认运行在3000端口，前端使用相对路径/api发起请求时，默认请求的是3000端口的服务，该端口不存在对应后端接口，返回的是React的404HTML页面，HTML以<开头，JSON解析时直接抛出语法错误。

修复步骤 #

1. 修正后端路由请求方法，同时添加JSON解析中间件处理POST请求的body参数，修改app/server/server.js代码：

const express = require('express');
const PORT = process.env.PORT || 8080;
const app = express();
const cors = require('cors');
app.use(cors());
// 添加解析JSON请求体的内置中间件
app.use(express.json())

// 将app.get修改为app.post，匹配前端的POST请求类型
app.post("/api", (req, res) => {
  // 后续可在此处添加req.body内的用户名、密码校验逻辑
  res.send({
    token: 'test123'
  })
});

app.listen(PORT, () => {
   console.log(`Server is running on ${PORT}`)
});

2. 修正前端请求地址，有两种可选方案：
   • 方案一：直接补全后端服务地址，修改app/client/src/Login.js里的loginUser方法：

   const loginUser = async (credentials) => {
    // 替换相对路径为后端完整服务地址
    return fetch('http://localhost:8080/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(credentials)
    })
      .then(data => data.json())
   }
   

   • 方案二：开发环境下可在React项目根目录的package.json中添加"proxy": "http://localhost:8080"配置，前端发请求时会自动代理到8080端口，无需修改原有请求路径。

内容的提问来源于stack exchange，提问作者Amadeo de la Peña