Axios POST请求传数据至Express后端时req.query.code返回undefined

我尝试使用axios.post方法向Express后端传递数据，但后端的req.query.code返回undefined，进而导致调用GitHub OAuth获取access_token时报错。

前端代码 #

const login = async (codeParam) => {
  if (codeParam.code.length > 1) {
    try {
      console.log("login with", codeParam) // 返回正确值 {code: 'value'}
      const response = await axios.post(
        "http://localhost:8000/getAccessToken",
        codeParam
      )

      if (response.data) {
        console.log("access token:", response.data.access_token)
        localStorage.setItem("user", JSON.stringify(response.data.access_token))
        localStorage.setItem("isLoggedIn", true)
      }
    } catch (error) {
      console.log(error)
    }
  }
}

后端路由代码 #

app.post("/getAccessToken", (req, res) => {
  console.log("code", req.query.code) // 返回undefined
  axios
    .post("https://github.com/login/oauth/access_token", {
      client_id: process.env.REACT_APP_CLIENT_ID,
      client_secret: process.env.REACT_APP_CLIENT_SECRET,
      code: req.query.code,
      redirect_uri: process.env.REACT_APP_REDIRECT_URI,
    })
    .then((result) => {
      console.log("access token backend", result.data)
    })
    .catch((err) => {
      console.log("error:", err)
    })
})

控制台输出 #

code undefined
access token backend error=bad_verification_code&error_description=The+code+passed+is+incorrect+or+expired.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-oauth-app-access-token-request-errors%2F%23bad-verification-code

解决方法 #

• 核心问题：前端将数据放在了POST请求的**请求体（body）中，但后端错误地从URL查询参数（query）**中取值，导致获取不到code。
• 第一步：确保Express项目已配置JSON请求体解析中间件，在项目入口文件（如app.js或server.js）中添加：

app.use(express.json());

• 第二步：修改后端代码，从req.body中获取code，替换所有的req.query.code为req.body.code：

app.post("/getAccessToken", (req, res) => {
  console.log("code", req.body.code) // 现在能拿到正确值
  axios
    .post("https://github.com/login/oauth/access_token", {
      client_id: process.env.REACT_APP_CLIENT_ID,
      client_secret: process.env.REACT_APP_CLIENT_SECRET,
      code: req.body.code,
      redirect_uri: process.env.REACT_APP_REDIRECT_URI,
    })
    .then((result) => {
      console.log("access token backend", result.data)
    })
    .catch((err) => {
      console.log("error:", err)
    })
})

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