React中CORS问题已解决，但POST请求数据无法传入req.body

一、先纠正你之前的CORS错误操作 #

你在请求里加Access-Control-Allow-Origin: *和mode: "no-cors"都是错误的：

• Access-Control-Allow-Origin是服务器返回的响应头，不是客户端请求头，加在请求里完全无效。
• mode: "no-cors"是Fetch API的参数，Axios不支持这个配置，开启后浏览器会严格限制请求，连响应内容都无法获取，反而会加重问题。

你用同端口（比如React代理）解决CORS是可行的，常规解决方式还可以在服务器端配置CORS响应头，比如Node.js用cors中间件：

// 服务器端示例（Express）
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有跨域请求

二、解决CORS后，POST请求req.body为空的问题 #

Postman能正常传数据，React不行，大概率是客户端请求的格式或请求头有问题，按以下步骤排查：

1. 修正Axios请求代码 #

删掉错误的请求头和无效的mode参数，Axios默认会自动处理JSON数据的序列化和请求头：

async function postRequest(url, data){
  try {
    // Axios自动将JSON数据转为application/json格式，并设置对应请求头
    const response = await axios.post(url, data);
    return response.data;
  } catch (err) {
    console.error('请求失败:', err);
    throw err;
  }
}

2. 避免手动覆盖Content-Type #

如果需要自定义请求头（比如token），不要丢失Content-Type。发送JSON数据时，Axios默认会添加Content-Type: application/json，手动设置headers时注意不要覆盖：

// 正确示例：仅添加必要的自定义头
async function postRequest(url, data){
  const headers = {
    'Authorization': 'Bearer your-token', // 示例自定义头
    // 无需手动添加Content-Type: application/json，Axios会自动处理
  };
  const response = await axios.post(url, data, { headers });
  return response.data;
}

3. 确认服务器端的请求体解析中间件 #

虽然Postman能用，但仍需确认服务器端是否配置了解析JSON请求体的中间件（必须放在路由之前）：

// Express服务器端配置
const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());
// 如需处理form-data或urlencoded格式，添加以下配置
app.use(express.urlencoded({ extended: true }));

// 后续配置路由
app.post('/', (req, res) => {
  console.log(req.body); // 此时应能正常获取数据
  res.send('success');
});

4. 检查传入的数据格式 #

确保传入postRequest的data是纯JSON对象，若为FormData格式，服务器端需使用对应解析中间件（比如multer）。

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