Vue.js中使用Axios POST请求传递自定义Header失败问题排查
解决Axios POST请求自定义Header无法传递的问题
嘿,我来帮你排查这个问题!从你贴的代码来看,首先有个明显的配置结构错误,另外还要考虑CORS的限制,这俩是最常见的原因,咱们一步步来:
1. 修正Axios请求的配置结构
你把headers嵌套在了config字段里,但Axios的请求参数中,headers应该是顶层配置项,不需要包在config里面。而且前端请求里设置Access-Control-Allow-Origin完全无效——这个是服务端用来告诉浏览器允许哪些域名跨域的响应头,前端加了只会浪费字节,直接删掉就行。
修正后的代码如下:
axios({ method: 'post', url: urltocall, data: strjson, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'username': 'test1' } }).then(function (response) { // 处理响应逻辑 })
2. 检查服务端的CORS配置
如果修正结构后还是传不过去username头,那大概率是CORS预检请求的问题。因为username属于自定义Header,浏览器会先发送一个OPTIONS预检请求,询问服务端是否允许这个自定义Header。
你需要在服务端的响应头里添加允许自定义Header的配置:
- 必须包含
Access-Control-Allow-Headers: username, Content-Type, Accept(把你需要的自定义Header明确列在这里) - 同时确保服务端正确处理OPTIONS请求,返回200状态码
举个Node.js/Express的配置示例:
app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:1337'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type, Accept, username'); // 快速响应OPTIONS预检请求 if (req.method === 'OPTIONS') { return res.sendStatus(200); } next(); });
3. 额外排查点
- 检查项目里有没有Axios拦截器,会不会在请求发送前把
username头给意外删掉了 - 打开浏览器开发者工具的Network面板,查看实际发送的POST请求的Request Headers:如果没看到
username,那是前端配置问题;如果看到了但服务端收不到,那就是服务端的接收逻辑或配置有问题
内容的提问来源于stack exchange,提问作者Krishnan V S




