问题
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};
}