Vue.js 中 axios 跨域訪問錯誤問題及解決方法
1、假如訪問的接口地址為 http://www.test.com/apis/index.php （php api 接口）
2、而開發(fā)地址為http://127.0.0.1:8080,當axios發(fā)起請求時，出現(xiàn)如下錯誤：
Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
解決方法：
1、修改config/index.js, 修改 proxytable
proxyTable: {
'/apis': {
target: 'http://www.test.com/apis/', // 接口地址
changeOrigin: true,
pathRewrite: {
'^/apis': '' //需要rewrite重寫的,
}
}
},
2、重啟 npm run dev (很重要，否則不生效)
3、訪問接口（訪問時通過代理轉發(fā)的，有點類似APACHE的urlrewrite，不需要完整http://www.test.com網(wǎng)址。）
this.$api.get('/apis/index.php?act=login', {
"act": "login"
}, response => {
//success
},error => {
//error
}
);
大功告成，成功解決錯誤，另外：PHP端不需要做任何的header設置，網(wǎng)上很多教程胡說八道，根本不能實現(xiàn)跨域。
總結
以上所述是小編給大家介紹的Vue.js 中 axios 跨域訪問錯誤問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
詳解vue中使用axios對同一個接口連續(xù)請求導致返回數(shù)據(jù)混亂的問題
這篇文章主要介紹了詳解vue中使用axios對同一個接口連續(xù)請求導致返回數(shù)據(jù)混亂的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要給大家分享的是Vue子組件接收父組件傳值的3種方式，主要通過聲明接收、接收數(shù)據(jù)的同時進行?類型限制、接收數(shù)據(jù)的同時對?數(shù)據(jù)類型、必要性、默認值?進行限制相關內容展開更多詳細的相關資料，需要的小伙伴可以參考一下2022-03-03
Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了.vue?文件是如何編譯成瀏覽器可執(zhí)行的文件,文中通過代碼示例將編譯流程介紹的非常詳細,對我們的學習或工作有一定的價值,感興趣的同學可以參考閱讀下2023-09-09
在現(xiàn)代Web開發(fā)中,前端應用經(jīng)常需要從后端接口獲取圖片數(shù)據(jù),下面這篇文章主要介紹了VUE前端如何處理后端接口返回的圖片的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue的三種路由模式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
組件化是為了方便代碼復用，提高開發(fā)效率。今天腳本之家小編給大家分享常見的vue組件寫法四種，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
如何解決Vue3組合式API模式下動態(tài)組件不渲染問題
這篇文章主要介紹了如何解決Vue3組合式API模式下動態(tài)組件不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教<BR>2024-03-03
vue3+vite項目配置ESlint、pritter插件過程
這篇文章主要介紹了vue3+vite項目配置ESlint、pritter插件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
eslint是一個JavaScript的校驗插件，通常用來校驗語法或代碼的書寫風格。這篇文章主要介紹了vue項目關閉eslint校驗,需要的朋友可以參考下2018-03-03