跨域是防止頁面去請求另外一個源的數據。協議,端口,域名,只要這個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