【vue cli2 & 3】 本地代理解决跨域问题

一、vue-cli2

在config/index.js中修改proxyTable：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // proxyTable: {},//原来为空
    proxyTable: {
      //这里自定义
      '/api': { //自己命名
        target: "https://xxx.com", //要代理的网址
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': "https://xxx.com" //重写路径
        }
      },
    },

    .....
  },

  .....
}

在定义接口的文件中（一般是src/request/api.js）：

const url = '/api'; //上一步自己起的名字


//  接口定义
export const register = data => {
  return request.post(url + "/register", data);
};

二、vue-cli3

修改根目录下的vue.config.js：

module.exports = {
  
  .....

  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: '80',
    // 自动打开浏览器
    open: true,
    proxy: {
      '/':{  //自命名
        changeOrigin: true,
        target:'https://xxx.com/', //要代理的域名
      }
    },

    ....
  },

  ....
}

修改src/utils/request.js：

// 创建axios实例
const service = axios.create({
  baseURL: '/', //上面的自命名
  // 超时
  timeout: 20000,
})