【Vue2 & Vue3】开发环境跨域配置

前端开发时难免会遇到本地localhost和后端服务ip不一致导致的跨域问题，这种情况往往可以通过使用nginx来做一个简单的反向代理，但是vue2和vue3在处理方式上还是略有差异，这里简单记录下。

Vue2：

1.修改config/index.js

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 上线配置
    proxyTable: {},
    // 本地配置
    proxyTable: {
      '/api': {
        target: "https://xxxx.com",//实际访问的ip
        changeOrigin: true,
        pathRewrite: {
          '^/api': "https://xxxx.com" //实际访问的ip
        }
      },
    }
  }
}

上线代码和本地开发代码只保留一个，本地开发时//掉上半部分，上线时//掉本地配置。 

2、修改接口定义的地方，我这里是src/request/api.js

const url = window.sessionStorage.getItem("IP"); //上线
const url = '/api'; //本地开发

同理，两个url只保留一个即可。  

Vue3：

1.修改vue.config.js

module.exports = {
    devServer: {
        proxy: {
            //上线代码
            ['http']: {
              target: process.env.VUE_APP_BASE_API,
              changeOrigin: true,
            }
            //本地开发代码
            '/':{
                changeOrigin: true,
                target:'https://xxxx.com/',//想要代理到的ip地址
            }
        }
    }
};

上线代码和本地开发代码只保留一个，本地开发时//掉上半部分，上线时//掉本地配置。

2. 修改包装axios的文件 ，我这里是request.js，或者任何发送请求的地方，用“/”替代域名

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: '/', //本地开发配置
  baseURL: process.env.VUE_APP_BASE_API,//上线配置
  ....
})

同理，两个baseURL只保留一个即可。