Fetch+Express.js发送POST请求返回异常，请求排查解决

核心问题：mode: 'no-cors' 限制响应访问 #

你在前端fetch配置里设置了mode: 'no-cors'，这会让浏览器返回opaque（不透明）响应——这种响应的所有内容都会被浏览器屏蔽，无法读取响应状态、body或headers，这就是你看到status: 0、body: null的直接原因。

你的后端已经配置了CORS允许所有源（origin: ['*']），完全不需要启用no-cors模式，该模式仅适用于不需要读取响应的场景（比如发送埋点数据）。

其他需修复的问题 #

1. 前端请求body未序列化
   你设置了Content-Type: 'application/json'，但直接把userData对象传给body，fetch不会自动将其序列化为JSON字符串，后端无法解析请求内容。

2. 后端未配置JSON解析中间件
   Express后端默认不会解析JSON格式的请求体，必须添加express.json()中间件，否则无法读取req.body里的数据。

3. 拼写错误
   变量名fecthData应为fetchData（虽不影响当前响应问题，但建议修正以避免后续隐患）。

修正后的代码 #

前端代码

const sendData = async e => {
  const { username, password } = userData
  if (username === '' || password === '') {
    e.preventDefault()
    alert(`No puede dejar ningún campo vacío`)
  } else {
    e.preventDefault()
    const url = 'http://localhost:3000'
    // 修正拼写错误、移除no-cors模式、序列化请求body
    const fetchData = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userData)
    }
    const res = await fetch(url, fetchData)
    // 解析JSON格式的响应
    const data = await res.json()
    console.log(data) // 现在会输出预期的 { msg: 'Post' }
  }
}

后端代码

import express from 'express'
import cors from 'cors'
const app = express()

const host = 'localhost'
const PORT = process.env.PORT || 3000

// 添加JSON解析中间件，需放在cors配置和路由之前
app.use(express.json())

app.use(
  cors({
    origin: ['*'],
    allowedHeaders: ['Content-type', 'application/json'],
    methods: ['POST']
  })
)

app.post('/', (req, res) => {
  // 现在可以读取前端发送的userData数据
  console.log(req.body)
  res.status(200).json({ msg: 'Post' })
})

app.listen(PORT, () => {
  console.log(`server on http://${host}:${PORT}`)
})

验证修复效果 #

1. 重启后端服务
2. 前端发送请求后，控制台会正确输出{ msg: 'Post' }，同时后端控制台也能打印出前端发送的userData内容。

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