登陆成功，接口扔报401。vue.config.js 配置代理请求，携带cookie

axios 配置baseUrl，在开发模式下为 ‘/api’，供代理服务器识别

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const instance = axios.create({
  withCredentials: true, // 请求携带cookie
  baseURL: IS_PROD ? 'https://www.xxx.com' : '/api',
  timeout: 1000 * 60 * 10,
})

vue.config.js proxy 配置

  let cookie = '' // 用于保存第一次登陆成功服务端下发的cookie，从代理服务器 proxyRes.headers['set-cookie'] 取出
  devServer: {
    port: 9000,
    open: false,
    overlay: {
      warnings: false,
      errors: true,
    },
    proxy: {
      '/api': { // ‘/api' 对应axios的baseUrl字段
        target: 'https://www.xx.com', // 目标服务器地址
        secure: false,
        ws: false,
        changeOrigin: true, // 是否改变域名
        pathRewrite: {
          // 路径重写
          '^/api': '', // 实际接口是'https://www.xx.com/login'， axios发出的是‘/api/login’，被代理服务器捕获，同时路径重写删除‘^/api’成‘/login’，转发到目标服务器
        },
        onProxyReq(proxyReq, req, res) {
          // 1.第一次请求/login接口，没有cookie

          // 3.第二次请求，cookie有值，赋值给req，以后每次请求均赋值
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
          // 2.第一次/login请求返回携带cookie，赋值保存，也仅仅login请求返回cookie
          if (!cookie) {
            cookie = proxyRes.headers['set-cookie']
          }

          // 4.第二次请求以及之后其他接口请求的时候并不返回cookie，所以不能再赋值
        },
      },
    },
  }