Vue 本地代理 純前端技術解決跨域

vue-axios獲取數據不少小夥伴都會使用，但若是先後端分離且後臺沒設置跨域許可，那要怎樣才能解決跨域問題？

經常使用方法有幾種：

1. 經過jsonp跨域
2. 經過修改document.domain來跨子域
3. 使用window.name 或location.hash 來進行跨域
4. 使用HTML5中的window.postMessage方法來跨域
5. 圖片ping或script標籤跨域
6. WebSocket
7. CORS

以上方法或多或少都有必定限制，有的不支持post有的須要後臺配合，這裏就不一一分析了；

那如何才能簡單又優雅地使用前端技術解決跨域問題呢？這篇博客正是爲此而生；

Vue 中使用本地代理，只需三步（其實兩步也行，但感受並不夠優雅）：

1、在config中建立一個proxyConfig.js，並在proxyConfig.js設置代理

設置代理：

module.exports = {
  proxy: {
    '/api': {
      target: 'https://www.aaa.com/',  // 接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        '^/api': '/'
      }
    }
  }
}

 

2、在config中的index.js中找到proxyTable進行編輯

proxyTable: proxyConfig.proxy,

3、使用axios的時候，在每一個接口前添加 '/api'

最後的最後

 

到此本地代理解決跨域完滿結束