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 中使用本地代理，只需三步（其實兩步也行，但感覺並不夠優雅）：

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

設置代理：

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

 

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

proxyTable: proxyConfig.proxy,

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

最后的最后

 

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