在平時(shí)本地開發(fā)過程中，容易遇到跨域問題，導(dǎo)致接口無法調(diào)通。這時(shí)候有多種方式解決，

1. 后端支持CORS
2. nginx反向代理
3. 使用jsonp請求
4. 使用http-proxy-middleware代理
   下面介紹的這種方式是webpack自帶的devServer，devServer中集成了http-proxy-middleware。配置devServer的proxy選項(xiàng)即可。代碼如下：

// 以下代理作用 =>  替換/api為localhost:3000/api，并且修改cookie的path
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    onProxyRes: function(proxyRes, req, res) {
      var cookies = proxyRes.headers['set-cookie'];
      var cookieRegex = /Path=\/XXX\//i;
      //修改cookie Path
      if (cookies) {
        var newCookie = cookies.map(function(cookie) {
          if (cookieRegex.test(cookie)) {
            return cookie.replace(cookieRegex, 'Path=/');
          }
          return cookie;
        });
        //修改cookie path
        delete proxyRes.headers['set-cookie'];
        proxyRes.headers['set-cookie'] = newCookie;
      }
    }
  }
}

假設(shè)使用axios進(jìn)行http請求

const api = axios.create({
    baseURL: '/api'
})

而接口配置類似如下，則會(huì)請求http://localhost:3000/api/getMenuList的接口：

export default {
    // 獲取菜單列表
    async getMenuList (params) {
        let res = await api.get('/getMenuList', {
            params: params
        })
        return res
    }
}

proxy還有一個(gè)rewrite功能,如下
以下代理作用 => 替換/api為localhost:3000，并且修改cookie的path

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
       '^/api': ''
    }
    onProxyRes: function(proxyRes, req, res) {
      var cookies = proxyRes.headers['set-cookie'];
      var cookieRegex = /Path=\/XXX\//i;
      //修改cookie Path
      if (cookies) {
        var newCookie = cookies.map(function(cookie) {
          if (cookieRegex.test(cookie)) {
            return cookie.replace(cookieRegex, 'Path=/');
          }
          return cookie;
        });
        //修改cookie path
        delete proxyRes.headers['set-cookie'];
        proxyRes.headers['set-cookie'] = newCookie;
      }
    }
  }
}