前端POST请求Payload可见，但后端无法接收请求体的原因

核心问题：mode: 'no-cors'的限制 #

你在fetch请求里设置了mode: 'no-cors'，这是导致后端拿不到请求体的关键原因：

• 当使用no-cors模式时，浏览器会将请求转为不透明请求（opaque request），此时即使你显式设置了Content-Type: application/json，浏览器也不会实际发送这个请求头，反而会使用默认的非JSON类型（比如text/plain）。后端因为无法识别请求体的JSON格式，解析后就会得到null。
• 同时no-cors模式下，前端也无法读取响应内容，完全不利于调试。

解决方案 #

1. 移除mode: 'no-cors'配置
   fetch默认使用cors模式，只要后端配置了正确的CORS响应头，就能正常处理跨域请求。修改后的请求代码如下：

const postSignUpDetails = async (event) => {
    event.preventDefault();  
    const data = {
        firstName: document.getElementById('first_name').value,
        lastName: document.getElementById('last_name').value,
        email: document.getElementById('email').value,
        password: document.getElementById('password').value,
    };

    console.log(data);

    try {
        const result = await fetch('http://localhost:3000/api/v1/users/signup', {
            method: "POST",
            body: JSON.stringify(data),
            // 移除mode: 'no-cors'配置
            headers: {
                "Content-Type": "application/json",
            }
        });
        console.log(result);
    } catch (error) {
        console.log(error);
    }  
}

document.getElementById('sign_up').addEventListener('click', postSignUpDetails);

2. 确保后端配置CORS支持
   如果前端和后端端口不同（比如前端在8080，后端在3000），需要在后端配置CORS允许前端域名的请求。以Express为例，安装并使用cors中间件：

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

// 开发环境可允许所有域名跨域，生产环境建议指定具体域名
app.use(cors());

// 必须配置解析JSON请求体的中间件，这是后端能拿到请求体的前提
app.use(express.json());

// 你的注册路由逻辑
app.post('/api/v1/users/signup', (req, res) => {
    console.log(req.body); // 现在应该能拿到正确的请求体了
    // ...后续处理逻辑
});

3. 验证后端JSON解析配置
   确认后端已经添加了解析JSON请求体的中间件（比如Express的express.json()），如果没加这个，即使请求头正确，后端也无法解析JSON格式的请求体，依然会得到null。

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