首页 > 移动平台 > 详细

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

时间:2021-01-14 14:58:13      阅读:1      评论:0      收藏:0      [点我收藏+]

问题

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

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

原文:https://www.cnblogs.com/evanc/p/14276513.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号