axios取CSV转JSON封装函数调用时,先报400后又返回200正常响应
异常成因
- 配置冲突:代码注释明确是GET请求,却在请求配置里写错了
method: 'post'。axios的配置合并优先级里,用户传的config参数比方法别名内置的method值优先级高,会直接把请求方法覆盖成POST。如果接口只支持GET,发POST请求会直接触发400错误。 - 错误处理没做完:axios的catch块只打印了错误,没调用Promise的
reject中断执行流,导致错误抛出来之后还有残留的异步逻辑在跑,所以会出现先打400错误、又出200响应的情况。 - 鉴权写法不规范:手动拼Base64编码的Authorization头,遇到用户名/密码带特殊字符(冒号、中文之类的)时,很容易出现编码格式不对,触发服务端的400鉴权错误。
- 调试日志写废了:打印响应状态的代码误写成了输出字符串
'response.status',根本看不到真实的请求状态码。
修复方案
- 先把错误的
method: 'post'配置删掉,消除请求方法的冲突。 - 把手动拼的鉴权头换成axios内置的
auth配置,自动处理编码逻辑,不用自己拼:const options = { auth: { username: user, password: pass } }; - 补全catch块的错误中断逻辑,调用
reject把错误抛给外部调用方,不要藏着:.catch((err) => { console.error(err); reject(err); }); - 把调试日志改成输出真实的响应状态:
console.log(response.status)。 - 直接重构为async/await语法,去掉手动包Promise的冗余代码,异步逻辑更可控:
//Dependencies import axios from 'axios'; import csv from 'csvtojson'; const getCSVUsers = async (url,user,pass,delimiter) => { const users = { users: [] }; const options = { auth: { username: user, password: pass } }; const response = await axios.get(url, options); const jsonArrayObj = await csv({ delimiter: delimiter, trim:true }).fromString(response.data); users.users = jsonArrayObj; return users; } export {getCSVUsers}
改完还出400的排查步骤
- 如果是跨域调用,先检查服务端的CORS配置有没有允许
Authorization头,确认OPTIONS预检请求的返回状态是200或者204。 - 核对请求URL是不是对的,有没有路径拼错、参数漏加的问题。
- 确认服务端接口是不是真的支持GET方法,有没有要求额外的请求头或者参数。
内容的提问来源于stack exchange,提问作者Nimrod Yanai
相关产品推荐
相关产品推荐

