axios.post请求报400错误但相同参数Postman请求正常该如何解决？

问题描述 #

相同接口地址和请求参数，Postman发送POST请求可正常提交，axios发起请求返回「Request failed with status code 400」错误，手动对参数做JSON.stringify处理后仍然报错。

报错截图 #

相关代码 #

const Axios = require("axios");
export const uploadImages = (data) => async (dispatch) => {
  dispatch({
    type: "UPLOAD_IMAGES_INIT",
  });
  try {
    const result = await Axios.post("http://localhost:4000/postImages", {
      "id":1,
      "name":"Flare Dress",
      "price":12000,
      "salePrice":20000,
      "discount":10,
      "pictures":[
         "/assets/images/fashion/product/1.jpg",
      ],
      "shortDetails":"Sed ut perspiciatis, unde omnis iste natu",
      "description":"Lorem Ipsum is simply dummy text of",
      "stock":16,
      "new":true,
      "sale":true,
      "category":"women",
      "colors":[
         "yellow",
      ],
      "size":[
         "M",
      ],
      "tags":[
         "nike",
      ],
      "rating":4,
      "variants":[
         {
            "color":"yellow",
            "images":"/assets/images/fashion/product/1.jpg"
         },

      ],
      "newPostImages":[
         {
            "images":"/assets/images/fashion/product/1.jpg"
         },
      ]
   });
  } catch (err) {
    const error = err.message || "Error Upload Images";
    dispatch({
      type: "UPLOAD_IMAGES_FAIL",
      payload: error,
    });
  }
};

排查步骤 #

1. 优先查看完整错误详情：400错误一般是参数格式、请求头不符合后端要求导致，在catch块中打印err.response?.data可拿到后端返回的具体错误提示，快速定位问题。
2. 对比浏览器Network面板中axios请求与Postman请求的差异：
   • 检查Content-Type请求头是否一致
   • 检查请求体格式是否完全一致

可行解决方案 #

方案1：修正JSON格式请求配置 #

如果后端要求接收JSON格式参数，不要手动对参数做JSON.stringify处理：axios默认会自动将JS对象序列化为JSON字符串，同时自动设置Content-Type: application/json请求头，手动序列化反而会导致请求体格式异常。
如果全局axios配置修改了默认序列化规则，可以手动补充请求头配置：

const result = await Axios.post("http://localhost:4000/postImages", {
  // 原有请求参数
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})

方案2：适配form-urlencoded格式要求 #

如果后端要求接收application/x-www-form-urlencoded格式的参数，需要用qs库对参数做序列化处理：

1. 安装qs库：npm install qs
2. 修改请求代码：

import qs from 'qs'

// 调用接口部分代码
const result = await Axios.post("http://localhost:4000/postImages", qs.stringify({
  // 原有请求参数
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

方案3：处理OPTIONS预检请求 #

如果Network面板中看到axios先发起了OPTIONS预检请求，且该请求返回400状态码，需要联系后端适配处理OPTIONS请求，放行跨域预检逻辑。

方案4：清理参数多余符号 #

当前代码的variants数组中存在多余的尾逗号和空行，部分低版本的序列化工具可能会出现解析异常，删除多余的符号后重试。

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