vue解决跨域+代理,包含vue2和vue3

vue2

先找到config/index.js,dev对象下的proxyTable中
写法:

proxyTable: {
          '/api': {
            target: "", // API服务器的地址
            changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
            pathRewrite: {
              '^/api': '' // 重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
            }
          }
        },

vue3

需要新建vue.config.js 【默认情况下，3以上的版本可以直接识别这个js文件，把它当做自己的配置文件】

步骤如下：

1、在项目框架的根目录下新建文件：vue.config.js

2、重启项目，这样的话新建的文件就可以被识别了,一定要重启

3、给新建的文件内添加解决跨域的代码部分

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://域名/api',// API服务器的地址
          ws: true,  //代理websockets
          changeOrigin: true, // 虚拟的站点需要更管origin
          pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
             '^/api': ''
          }
        }
      }
    }
  }

使用

this.$axios.post('/api/register',{//最终相当于https://域名/api/register
    
 })
  .then(function (res) {
      console.log(res);
  })