axios增加自定义headers，页面上出现，服务端收不到

问题

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