React.js中使用Fetch发送POST请求至PostgreSQL数据库时请求体为空的注册功能问题

兄弟，你的问题根源就在mode: 'no-cors'这个配置上！

当你开启no-cors模式时，浏览器会把请求严格限制在简单请求的范围内，而你设置的Content-Type: 'application/json'根本不在简单请求允许的Content-Type列表里（简单请求只认application/x-www-form-urlencoded、multipart/form-data、text/plain这三种）。这种情况下，浏览器会直接忽略你自定义的Content-Type，连带着你序列化好的JSON请求体也可能被丢弃，后端自然就收到空的Body了。

而且no-cors模式下你还没法读取响应内容，这对用户注册功能来说完全是反需求啊！

解决方案 #

1. 移除mode: 'no-cors'：默认的cors模式才是你需要的（甚至可以不写这个参数，因为fetch默认就是cors模式）
2. 配置后端CORS支持：确保你的后端允许前端所在域名发起跨域请求（比如你的React跑在http://localhost:3000，就要让后端允许这个域名的请求）

修改后的请求代码 #

const response = await fetch("http://localhost:8080/api/user", {
  method: "POST",
  headers: { 
    'Content-Type': 'application/json' 
  },
  body: JSON.stringify({ 
    "username": "lpkopjp", 
    "email": "mimiomo@mail.ru", 
    "password": "12345678", 
    "repeat_password": "12345678" 
  })
});

// 现在可以正常处理响应了
if (response.ok) {
  const result = await response.json();
  console.log("注册成功:", result);
} else {
  console.error("注册失败");
}

后端CORS配置示例（以Express为例） #

如果你的后端用Express开发，直接用cors中间件就能搞定：

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

// 只允许你的React应用域名跨域（开发环境示例）
app.use(cors({
  origin: 'http://localhost:3000'
}));

// 其他路由和逻辑...
app.listen(8080, () => console.log("服务运行在8080端口"));

这样调整后，你的POST请求应该就能正常发送JSON请求体了，后端也能正确接收数据~

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