Express+React项目中Fetch API无法获取请求体，jQuery AJAX正常

看起来你遇到的问题核心出在Fetch API的配置细节上，对比jQuery AJAX能正常工作的情况，我们来一步步排查和修复：

核心问题分析 #

你的Fetch代码里有两个关键错误导致请求异常：

1. 错误启用mode: 'no-cors' #

当设置mode: 'no-cors'时，浏览器会将请求转为不透明请求，这种模式下：

• 你完全无法读取响应的任何内容（包括状态码、响应体）
• 不允许设置Content-Type: application/json这类非简单请求头，浏览器会自动忽略这些配置
• 跨域相关的CORS机制也无法正常触发

而jQuery AJAX默认不会启用这个限制模式，所以能正常和后端交互。

2. 请求URL缺少协议前缀 #

你写的fetch('localhost:1337/rest/api')没有加上http://前缀，浏览器会把它当成当前页面的相对路径（比如前端在http://localhost:3000时，实际请求会变成http://localhost:3000/localhost:1337/rest/api），这显然不是你要访问的后端地址。

修正后的Fetch代码 #

把这两个问题修复后，代码应该是这样的：

fetch('http://localhost:1337/rest/api', {
  method: 'POST', // 请补上你实际使用的请求方法，比如POST/GET
  body: JSON.stringify({
    name: "Sidd",
    info: "Lorem ipsum dolor .."
  }),
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

额外注意：后端CORS配置 #

因为你的前端跑在3000端口，后端在1337端口，属于跨域请求，需要确保Express后端配置了CORS支持。最简单的方式是使用cors中间件：

1. 安装依赖：

npm install cors

2. 在Express项目中启用：

const express = require('express');
const cors = require('cors');
const app = express();

// 开发环境可允许所有跨域请求，生产环境建议限制指定来源
app.use(cors());

// 或者指定仅允许前端地址跨域
// app.use(cors({ origin: 'http://localhost:3000' }));

// 解析JSON请求体
app.use(express.json());

// 你的API路由
app.post('/rest/api', (req, res) => {
  console.log('Received request body:', req.body);
  res.json({ status: 'success', message: 'Data received' });
});

app.listen(1337, () => console.log('Server running on port 1337'));

这样调整后，Fetch API应该就能像jQuery AJAX一样正常和后端交互了。

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