React前端调用自研后端API报错，Postman可正常请求求排查

问题背景 #

• 自研React前端与后端API，后端接口http://XX.XXX.XX.XX/api/v1/endpoint接收JSON格式参数，Postman调用正常，但React前端调用报错
• 已移除API登录认证要求，问题仍存在

报错截图 #

前端代码 #

import axios from 'axios';

const user = "RANDOM USER";
const url = "RANDOM URL";
const keyWord = "RANDOM KEYWORD";

const test = async () => {
  const details = JSON.stringify({
    user,
    url,
    keyWord,
  });

  try {
    await axios
      .get('http://XX.XXX.XX.XX/api/v1/endpoint', details, {
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then((res) => {
        console.log(JSON.stringify(res.data));
      })
      .catch((err) => {
        if (err.response) {
          // console.log(details); //WORKS
          console.log(err.response.data.error);
        }
      });
  } catch (e) {
    console.log(e);
  }
}

后端代码 #

exports.test = catchError(async (req, res, next) => { //catchError是包含try-catch的外层函数，可正常捕获错误
  const { url, keyWord } = await req.body;

  const response = await axios.get(url);
  const html = await response.data;

  res.status(200).json({
    status: 'success',
    data: {
      'XXXX'
    }
  });
})

核心问题分析 #

1. 请求方法不匹配：后端通过req.body获取参数，说明该接口应为POST请求，但前端使用了axios.get()。GET请求不会携带请求体，后端无法获取url和keyWord参数，导致后续调用axios.get(url)时因url为undefined抛出错误。
2. Axios GET传参逻辑错误：即使要使用GET传递参数，Axios的GET方法第二个参数是配置对象，而非请求体，正确传参方式是通过params字段，而非直接传入JSON字符串。
3. 多余的JSON序列化：Axios会自动对POST请求的JSON参数进行序列化，手动调用JSON.stringify会导致参数格式异常。

修复方案 #

前端代码修正（改为POST请求） #

import axios from 'axios';

const user = "RANDOM USER";
const url = "RANDOM URL";
const keyWord = "RANDOM KEYWORD";

const test = async () => {
  try {
    const res = await axios.post(
      'http://XX.XXX.XX.XX/api/v1/endpoint',
      { user, url, keyWord },
      { headers: { 'Content-Type': 'application/json' } }
    );
    console.log(JSON.stringify(res.data));
  } catch (err) {
    if (err.response) {
      console.log(err.response.data.error);
    } else {
      console.log(err);
    }
  }
}

后端代码优化 #

req.body无需await，直接解构即可；response.data是同步属性，无需额外await：

exports.test = catchError(async (req, res, next) => {
  const { url, keyWord } = req.body;

  const response = await axios.get(url);
  const html = response.data;

  res.status(200).json({
    status: 'success',
    data: {
      'XXXX'
    }
  });
})

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