问题
axios增加自定义headers，页面上出现，服务端收不到
原因
vue-cli起的服务是用node-http-proxy中间件处理的
默认是只有几个常用的header，自定义header是直接被过滤掉的
不管是vue自带的服务，node，还是nginx，服务端上需要设置自定义header
解决方案
开发环境
vue.config.js增加自定义header
onProxyReq: function(proxyReq, req, res) {
const token = req.headers['x-token'] //req.headers会将大小转为小写，此处key需要转为小写
proxyReq.setHeader('X-Token', token)
},
完整代码
proxy: {
'/api': {
target: 'http://xxx.xx.xx.xx:xxxx/api',
ws: true,
changeOrigin: true,
pathRewrite: { '^/api': '' },
secure: false,
onProxyReq: function(proxyReq, req, res) {
const token = req.headers['x-token']
proxyReq.setHeader('X-Token', token)
},
},
},
开发环境
服务器配置中增加自定义header字段，此处只列举nginx配置
location /api{
proxy_pass ${WEB_URL};
proxy_pass_header X-Token ${xxx};
}
参考资料
cue-cli 配置参考
http-proxy-middleware
