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)站的支持！