Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺(tái)php)
問題描述
前端 vue 框架,后臺(tái) php,百度跨域問題后臺(tái)加這段代碼
header("Access-Control-Allow-Origin: *");
加了之后報(bào)這個(gè)錯(cuò):
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

解決辦法
文章鏈接:CORS: credentials mode is ‘include'
xhrFields: {
withCredentials: false
},
把 withCredentials: true 改成 withCredentials: false,如果你沒加上面那段代碼當(dāng)然也不會(huì)報(bào)這個(gè)錯(cuò)。雖然是解決方法很簡(jiǎn)單,但經(jīng)此發(fā)現(xiàn)許多知識(shí)沒掌握不得不梳理下。
•HTTP 請(qǐng)求方式有許多種,有些請(qǐng)求會(huì)觸發(fā) CORS 預(yù)檢請(qǐng)求?!靶桀A(yù)檢的請(qǐng)求”會(huì)使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求到服務(wù)器,以獲知服務(wù)器是否允許該實(shí)際請(qǐng)求。
•對(duì)于跨域請(qǐng)求瀏覽器一般不會(huì)發(fā)送身份憑證信息。如果要發(fā)送憑證信息,需要設(shè)置 XMLHttpRequest 的 withCredentials 屬性為 true:withCredentials: true。此時(shí)要求服務(wù)器的響應(yīng)信息中攜帶 Access-Control-Allow-Credentials: true,否則響應(yīng)內(nèi)容將不會(huì)返回。
•對(duì)于攜帶身份憑證的請(qǐng)求,服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”。因?yàn)檎?qǐng)求頭攜帶了 Cookie 信息。要將 Access-Control-Allow-Origin 的值設(shè)置為 http://www.zrt.local:8080。
•另外,響應(yīng)頭中也攜帶了 Set-Cookie 字段,嘗試對(duì) Cookie 進(jìn)行修改。如果操作失敗,將會(huì)拋出異常。
跨域請(qǐng)求想要帶上 cookies 必須在請(qǐng)求頭里面加上:
crossDomain: true,
xhrFields: {
withCredentials: true
}
又變成文章開頭的問題了,解決辦法:
后臺(tái)代碼:
Access-Control-Allow-Origin: 'http://www.zrt.local:8080' Access-Control-Allow-Credentials: true
前端代碼:
crossDomain: true,
xhrFields: {
withCredentials: true
}
跟之前一樣就行了。
總結(jié)
以上所述是小編給大家介紹的Vue 項(xiàng)目中遇到的跨域問題及解決方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10
使用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果
vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多,其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果,需要的朋友可以參考下2018-06-06
vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法,需要的朋友參考下吧2017-10-10
WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err解決辦法
在使用webstorm新建vue項(xiàng)目時(shí)常會(huì)遇到一些報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12

