React登录页Axios请求404：Postman GET正常POST报错

问题现象 #

开发React登录页面时，使用Axios发起POST请求出现AxiosError 404错误。通过Postman测试发现：

• 仅请求目标URL（GET方法）返回状态码200
• 携带POST数据请求时返回404
  已核对请求URL，未发现拼写错误。

控制台报错信息 #

AxiosError
code: "ERR_BAD_REQUEST"
config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message: "Request failed with status code 404"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response: {data: '', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
stack: "AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=55c2aff0:1206:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=55c2aff0:1423:7)"
[[Prototype]]: Error

排查方向 #

• 核对后端路由配置：确认后端是否为该URL配置了POST方法的处理路由，多数后端框架中GET和POST路由是独立配置的，可能仅配置了GET路由导致POST请求无匹配路径。
• 检查请求头与数据格式：Axios默认以application/json格式发送请求体，确认后端是否支持接收该类型数据；若后端要求form-data格式，需调整Axios的请求头和数据序列化方式。
• 对比Postman与Axios请求：确保两者的请求体字段、格式完全一致，避免因字段拼写错误、数据类型不匹配导致路由不匹配。
• 查看后端日志：直接查看后端的请求记录日志，确认POST请求是否到达后端，以及返回404的具体触发原因，这是最有效的排查手段。
• 检查URL动态参数：若请求URL包含动态参数，确认参数值是否正确传递，避免因参数错误导致后端路由无法匹配。

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