ProxyTable 解決跨域

使用vue-cli腳手架工具開發時，我們在本地啓動服務，比如本地開發服務下是 http://localhost:8080 這樣的訪問頁面，但是我們的接口地址是 http://xxxx.com/all/index 這樣的接口地址，直接使用必然會出現跨域問題，導致接口請求不成功。

當出現這樣的報錯，就說明請求跨域了

localhost/:1 Failed to load http://sys.xxxx.com/all/permision: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resourcewith CORS disabled.

• 爲什麼會跨域:
  因爲瀏覽器同源策略的限制，不是同源的腳本不能操作其他源下面的對象。
   
• 什麼是同源策略:
  同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

  簡單的來說:協議、域名、端口號三者都相同，則爲同源

解決跨域的辦法很多，比如jsonp，cors。但是在使用webpack做構建工具的項目使用proxyTable代理實現跨域是一種比較方便的選擇。

拿vue-cli舉例，我們進入 config/index.js 代碼下如下配置：（由於我們是在開發環境下使用，所以要配置在dev裏）

dev:{
    env:require('./dev.env'),
    port:8080,
    autoOpenBrowser:true,
    assetsSubDirectory:'stasic',        // 靜態資源文件夾
    assetsPublicPath: '/',                // 發佈路徑
     proxyTable: {
      '/api': {
        target: 'http://xxxxxx.com',     // 請求地址的接口域名
        // secure: false,              // 如果是https接口，需要配置這個參數
        changeOrigin: true,             // 是否跨域，如果接口跨域，需要進行這個參數配置
        pathRewrite: {
          '^/api': ''                  //重寫接口
        }
      }，
        cssSourceMap:false
    }
}

加上這行代碼就能將本地8080端口的請求代理到了http://xxxxxx.com這一域名下。相當於說直接將以api開頭的接口名代理一下換成目標域名訪問