webpack跨域配置proxyTable

 '/accountApi': {
        target: '',//目标接口域名
        changeOrigin: true,//是否跨域
        secure: false,
        pathRewrite: {//重写接口
          '^/accountApi': '/'
        },
        onProxyRes: function (proxyRes, req, res) {
          //登录处理
          let cookies = proxyRes.headers['set-cookie']
          var newCookies = []
          if (cookies) {
            cookies.forEach(cookie => {
              // 连接到 local dev qa 执行下面代码
              newCookies.push(
                cookie.replace(/目标域名/, 'localhost')
              )
              //连接到 uat prod 执行下面代码
              // newCookies.push(
              //   cookie
              //     .replace(/目标域名/, 'localhost')
              //     .replace(/Secure; HttpOnly/, '')
              // )
            })
            proxyRes.headers['set-cookie'] = newCookies
          } else {
            console.log('登录失败=========')
          }
        }
      },

dev-server的proxy有两个事件“onProxyReq”,“onProxyRes”,onProxyReq:可以在请求发送前对请求内容进行更改
onProxyRes:可以在请求响应后对请求内容进行更改
项目中遇到跨域问题,再不设置CORS跨域的情况下,开发使用代理解决跨域问题。
1.先获取验证码,直接加载url的方式获得,返回值中带cookie
2.登录请求,是异步请求axios,需带上cookie
问题:
1.跨域采用代理方式,用proxyTable
2.登录请求头里加入cookie, axios设置withCredentials: true
3.cookie作用范围,需配置代理服务器。

参考文章:https://www.cnblogs.com/strinkbug/p/6073806.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 注:文章太长了,因此分为两段,但第一部分比较常用也更重要,可重点掌握。跨域指的是浏览器不能执行其它网站的脚本,由于...
    AizawaSayo阅读 3,973评论 0赞 4
  • 1.什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScrip...
    phantom_f835阅读 30,856评论 1赞 15
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,451评论 0赞 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,163评论 0赞 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 981评论 0赞 4

友情链接更多精彩内容