跨域是防止頁面去請求另外一個源的數據。協議，端口，域名，只要這個3個中有一個不同就是跨域。

VUE默認只解決開發環境，也就是本地的跨域問題，測試環境以及線上的跨域問題由其他方式解決。我們先看看開發環境跨域問題怎么解決。

開發環境

使用 Vue-cli 創建的項目，開發環境的url是http://localhost:8080，與我們請求的接口url=不一致，所以肯定會遇到跨域問題。解決方案如下：

1、在vue項目根目錄下找到/config/index.js文件

路徑

2、index.js文件中找到proxyTable配置項

 proxyTable: {
    '/api': {
        target: 'http://www.xxx.com', // 需要跨域請求的地址或者IP
        changeOrigin: true, //  表示是否跨域
        pathRewrite: {
            '^/api': '/api' //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉 
        }
    }
}

3、axios 請求

axios.get('/report/data.json').then((res) => { 
　　console.log(res)
}).catch((err) => {
　　console.log(err)
})

如果希望項目更便于管理，就寫一個公用的接口js文件，公用接口文檔見這里~

生產環境

我們項目做完以后要在測試環境運行的時候，我們無法單方面解決跨域問題的，需要接口配合。
需要后臺接口更改header

header('Access-Control-Allow-Origin:*');//允許所有來源訪問 
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

我們需要做的是：設置測試環境統一接口域名，

Axios.defaults.baseURL='http://apis.baidu.com'
Axios.get('/user')  //訪問/user就相當于訪問 http://apis.baidu.com/user