axios跨域

跨域是防止頁面去請求另外一個源的數據。協議,端口,域名,只要這個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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容