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

