【原創】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
      }
    }