React、Express、Node.js POST请求异常：服务端无法正常接收JSON数据

问题根源 #

两个配置错误叠加，直接导致了服务端收不到正确JSON、数据被当纯文本处理的现象：

• 前端请求开启了mode: 'no-cors'，这是最根本的诱因。no-cors模式下浏览器会把非安全类的请求头强制降级，你手动设置的Content-Type: application/json会被自动替换为text/plain发往后端；同时这种模式下JS完全没法读取后端返回的响应内容，哪怕请求成功到达后端，前端也拿不到任何返回数据。
• 后端为了适配这个错误的请求格式，临时加了bodyParser.text()中间件，还在路由里手动解析JSON，反而让原本正常的JSON解析链路失效。之前“不开text中间件req.body就为null”的现象，本质就是因为no-cors篡改了请求头，json解析中间件根本识别不了，不是中间件本身的问题。

前端代码调整 #

• 直接删掉fetch配置里的mode: 'no-cors'，常规业务接口交互完全不适合用这个模式，它只适配埋点、图片打点这类不需要读取响应的场景。
• 保留原有JSON格式的请求头设置，调整后的请求代码片段：

const response = await fetch(url,{
  method: method, 
  body: body,
  headers: {'Content-Type': 'application/json'},
  cache: 'no-cache'
});

• 如果开发阶段前后端端口不一致触发跨域拦截，不要用no-cors硬绕，在后端配置CORS规则允许前端来源即可，完全能正常完成接口交互。

后端代码调整 #

• 删掉多余的app.use(bodyParser.text())中间件。这个中间件本来就是为了兜底no-cors发过来的纯文本请求才加的，前端配置修正后，请求会正确携带application/json头，这个中间件完全没有存在的必要。
• 删掉路由里手动写的req.body = JSON.parse(req.body)逻辑：正常配置好bodyParser.json()之后，req.body本身就是解析完成的JSON对象，手动parse反而会在数据已经是对象类型的时候抛出解析错误。
• 补全跨域配置后的app.js参考代码：

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express()

// 允许本地前端跨域访问
app.use(cors({ origin: 'http://localhost:3000' }))
// 解析application/json格式的请求体
app.use(bodyParser.json())

app.use('/api/auth',require("./routes/auth.route"))

• 去掉手动解析逻辑后的注册路由参考代码：

async (req,res)=>{
  console.log("body",req.body)
  console.log("email",req.body['email'])

  const validationErrors = validationResult(req);
  console.log(validationErrors.array())
  if(!validationErrors.isEmpty())
    return res.status(401).json({arguments: validationErrors.array(),type:"wrongInputData"});
  console.log(2) 
}

验证检查要点 #

• 打开浏览器开发者工具的网络面板，确认发出的POST请求请求头里，Content-Type为application/json，而非被强制替换的text/plain。
• 不要在正常业务交互里使用no-cors模式，否则哪怕接口请求成功，前端也读不到任何返回数据，完全没法开展业务逻辑。

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