Vue解決跨域問題

　　原理：因為客戶端請求服務端的數據是存在跨域問題的，而服務器和服務器之間可以相互請求數據，它們之間沒有跨域的概念（如果服務器沒有設置禁止跨域的權限問題），也就是說，可以配置一個代理服務器來請求另一個服務器中的數據，然后把請求出來的數據返回到代理服務器中，代理服務器再把數據返回客戶端，即可實現跨域數據訪問

在Vue中使用proxy進行跨域的原理是：將域名發送給本地的服務器（啟動vue項目的服務：localhost:8080），再由本地的服務器去請求真正的服務器

1.一般使用vuecli生成的項目下的config文件夾里有一個index.js文件，進行跨域設置就是設置其中的proxyTable（或者proxy）

// 配置跨域，這里的/api中,^/api,下面baseURL的/api的中api，可以隨便改，但是必須保證三者一致
    proxyTable: {
      // 1.在proxy中設置要訪問的接口
      '/api': {
        // 接口地址
        target: 'http:',
        // 是否允許跨越
        changeOrigin: true,
        // 重寫，這里應該是匹配所有以/api開頭的鏈接,匹配的時候會將/api替換成target的接口地址
　　　　　// 如果接口地址中就有/api，則不需要重寫，如接口地址是/api/a/login，則直接套用上面模板，並在axios的url中寫/api/a/login

        pathRewrite: {
          '^/api': ''
        }
      }
    }

2.重啟服務，即可實現跨域

 

 

對於vuecli3創建的項目，需要在src目錄下，即和package.json同一級，創建vue.config.js，這個文件會自動被加載

在vue.config.js文件中如下配置：

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
module.exports = {
      // 服務項配置    
      devServer: {
            host: 'localhost',
            port: 8080,
            https: false,
            // 自動啟動瀏覽器
            open: true,
            // 設置代理proxy
            proxy: {
                  '/api': {
                        target: 'http://50.0.3.1:8080',
                        changeOrigin: true,    //表示是否跨域，
                        // pathRewrite: {           //表示需要rewrite重寫的，如果接口地址中就有/api，則不需要重寫
                        //       '^/api': '/api',
                        // }
                  }
            }
      }
}

重啟服務，即可實現跨域