如何将React的queryParams传递到Node.js并解决后端接收为空问题

问题原因 #

• 客户端请求未指定内容格式：使用fetch提交JSON数据时，没有添加Content-Type: application/json请求头，后端无法识别请求体的编码格式，不会主动解析内容。
• 服务端未配置请求体解析中间件：Express框架默认不会解析POST请求的请求体，需要手动挂载对应解析中间件才能将内容挂载到req.body属性上。
• 额外潜在问题：你的useEffect没有传入依赖数组，会导致请求在每次组件渲染后无限重复触发。

修复方案 #

1. 客户端代码修改 #

补充请求头，同时给useEffect添加依赖项，避免重复请求：

// 假设code是你要传递的OAuth参数
useEffect(() => {
    // 确保code有值再发起请求，避免传空
    if (!code) return
    fetch("http://localhost:5000/create", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ code }), // 封装成对象传递，后端取值更方便
    })
      .then(response => response.json())
      .then(json => {
        console.log("parsed json", json);
      })
      .catch(ex => console.error(ex)); // 不要留空catch，方便排查错误
  }, [code]); // 仅在code变化时触发请求

2. 服务端代码修改 #

挂载Express内置的JSON解析中间件（Express v4.16.0及以上版本支持，更低版本需自行安装body-parser包引入）：

// 放在所有路由定义之前
app.use(express.json())

app.post("/create", function (req, res) { 
  console.log(req.body.code); // 可正常拿到传递的code值
  // 处理完逻辑后要返回响应，避免前端请求超时
  res.json({ status: 'success' })
});

额外注意事项 #

如果前后端端口不一致存在跨域问题，需要在服务端配置CORS：

1. 安装cors包：npm install cors
2. 引入并挂载中间件：

const cors = require('cors')
app.use(cors())

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