Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺php)
問題描述
前端 vue 框架,后臺 php,百度跨域問題后臺加這段代碼
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ò)。雖然是解決方法很簡單,但經(jīng)此發(fā)現(xiàn)許多知識沒掌握不得不梳理下。
•HTTP 請求方式有許多種,有些請求會(huì)觸發(fā) CORS 預(yù)檢請求?!靶桀A(yù)檢的請求”會(huì)使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請求到服務(wù)器,以獲知服務(wù)器是否允許該實(shí)際請求。
•對于跨域請求瀏覽器一般不會(huì)發(fā)送身份憑證信息。如果要發(fā)送憑證信息,需要設(shè)置 XMLHttpRequest 的 withCredentials 屬性為 true:withCredentials: true。此時(shí)要求服務(wù)器的響應(yīng)信息中攜帶 Access-Control-Allow-Credentials: true,否則響應(yīng)內(nèi)容將不會(huì)返回。
•對于攜帶身份憑證的請求,服務(wù)器不得設(shè)置 Access-Control-Allow-Origin
的值為“*”。因?yàn)檎埱箢^攜帶了 Cookie 信息。要將 Access-Control-Allow-Origin
的值設(shè)置為 http://www.zrt.local:8080。
•另外,響應(yīng)頭中也攜帶了 Set-Cookie
字段,嘗試對 Cookie 進(jìn)行修改。如果操作失敗,將會(huì)拋出異常。
跨域請求想要帶上 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 項(xiàng)目中遇到的跨域問題及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02Vue函數(shù)式組件的應(yīng)用實(shí)例詳解
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實(shí)例詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10