【原创】vue项目跨域问题的终极解决方案

关于vue项目开发环境的跨域问题，网上搜索到的方案和解释竟然没有一个真正理解和解释清楚了的。本人做了各种测试全部整理清楚，觉得有必要和大家分享我得出的结论。

方案一：axios的baseURL设置为全路径，无需使用proxy

开发环境的时候，只用axios就可以解决跨域问题；不用在配置文件中配置 proxy之类的属性

axios.default.baseURL=  http://xxxx;#即可

//次域名必须是 全域名的绝对路径
//不信的你试一试 

 

方案二：使用proxy属性，不使用axios的baseURL

可以完全不使用axios只用proxy实现，此时axios的baseURL必须是带域名的全路径

//带pathRewrite的情况
proxyTable: {
      '/api': { //必须以/开头
        target: 'http://cmsapi.vote.cmstop.com', // 设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' 
        }
      }
    }  
//不带pathRewrite情况    
proxyTable: {

      '/api': { //必须以/开头
        target: 'http://cmsapi.vote.cmstop.com', // 设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true//后面不使用reWrite
 　　　　}
    } 

1，如果添加了pathRewrite:{'^/api':"} ,那么请求接口url需要以/api/api开头

第一个/api为了匹配proxy的配置，此时url的真实路径等价于 target+/api/api;

由于使用了pathRewrite:{'^/api':"}，此时url的真实等价于target+/api； 虽然路由上会带有2个api，不影响真实的url地址；

2，如果没有添加pathRewrite:{'^/api':"}，那么请求接口url需要以/api开头即可

第一个/api仍然为了匹配proxy的配置，url的真实路径等价于 target+/api;此时路由上只有一个api，完全正确；

 

方案三：axios的baseURL和proxy配合使用；

此时axios的baseURL不能是带域名的全路径，

service = axios.create({
  baseURL: '/api',  //process.env.BASE_API,
})

proxyTable: {
      '/api': {
        target: 'http://cmsapi.vote.cmstop.com', // 设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
        }
      }
    }

1,此时请求接口url需要以/api开头即可，真实请求地址就是target+/api

虽然路由上会带有2个api，其中一个/api是由axios的baseURL添加的，跨域代理的时候又被pathRewrite去掉了,不影响真实的url地址；

2,如果想省略前缀/api，解决方案

使用axios的baseURL统一添加前缀，去匹配proxy的配置，不用配置pathRewrite属性；

效果和方案二中的第二种情况一样；

service = axios.create({
  baseURL: '/api',  //process.env.BASE_API,
})

proxyTable: {
      '/api': {
        target: 'http://cmsapi.vote.cmstop.com', // 设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true
      }
    }