vue-cli 与 axios 跨域的cookie配置，教你摆脱后端依赖

写在前面

某天，某人正在认真的写 bug

突然，线上环境有个问题，测试环境无法复现。测试说，莫得办法，连上线上环境自己搞下？

某人：那不就跨域了吗？？

赶紧翻翻 vue-cli 的跨域咋配置的？

module.exports = {
    
    
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
    
    
        target: '<other_url>'
      }
    }
  }
}

一顿操作猛如虎，run 起来一看 401，没登录

某人：明明已经登录了，为什么还是没有权限访问呢？

cookie

不慌不慌，看看线上的接口 request-header 和本地的接口 request-header有啥区别

在这里插入图片描述

原来后台将登录信息放进了 cookie，每次调用接口携带 cookie 来识别用户是否登录了。

我们知道 axios 默认是不会携带 cookie 的

在这里插入图片描述

所以在 config 中将这个选项设置为 true ：

 const config = Object.assign(
            {
    
    
                baseURL: env.url,
                timeout: 100000,
                withCredentials: true,
            },
            userConfig
        )

一顿操作风如虎，刷新一看还是 401

纳尼？？再次比对一下请求头，看看又是那个刁民想害朕

set-cookie

明明携带了cookie，为啥还是未登录呢？

某人灵机一动，看来是 cookie 本身出了问题啊。

打开控制台，切换到 applation，点开存储=》cookie 看一下当前域名下存储了哪些 cookie

果不其然，关于登录信息那部分 cookie 没有写进来

再次查看登录接口的response-header

在这里插入图片描述

原来这里的set-cookie指定了cookie存储的domain！

看到这里，可能你就要气势汹涌的去喊后端了，让他给你来个 cors 跨域配置。

这里呢，某人想说，这可是线上环境啊兄弟，请你三思。

cookieDomainRewrite

老司机教你一个新姿势，让你的本地项目环境完全脱离后端的控制

高版本的 http-proxy 添加了一些新的属性，比如 cookieDomainRewrite、cookiePathRewrite

通过这两个属性呢，我们可以直接改写响应头中的 set-cookie

那么具体使用的方法，某人在这里放一个截图

在这里插入图片描述

因此，我们直接通过这连个属性，将 cookie 写到我们的开发环境下。

比如，我的环境是http://192.168.0.105:8080/

那么，可以这么写：

 proxy: {
    
    
    '/api': {
    
    
        target: 'https://your production url',
        changOrigin: true,
        cookiePathRewrite: {
    
    
            '*': 'http://192.168.0.105:8080'
        },
        cookieDomainRewrite: {
    
    
            '*': '192.168.0.105'
        }
    }
}

这里的通配符表示将所有的域名和路径下的cooike 都重写到105下

重启，再次访问页面，数据终于出来了～