Vue 項(xiàng)目中遇到的跨域問題及解決方法(后臺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，如果你沒加上面那段代碼當(dāng)然也不會報這個錯。雖然是解決方法很簡單，但經(jīng)此發(fā)現(xiàn)許多知識沒掌握不得不梳理下。
•HTTP 請求方式有許多種，有些請求會觸發(fā) CORS 預(yù)檢請求?！靶桀A(yù)檢的請求”會使用 OPTIONS 方法發(fā)起一個預(yù)檢請求到服務(wù)器，以獲知服務(wù)器是否允許該實(shí)際請求。
•對于跨域請求瀏覽器一般不會發(fā)送身份憑證信息。如果要發(fā)送憑證信息，需要設(shè)置 XMLHttpRequest 的 withCredentials 屬性為 true：withCredentials: true。此時要求服務(wù)器的響應(yīng)信息中攜帶 Access-Control-Allow-Credentials: true，否則響應(yīng)內(nèi)容將不會返回。
•對于攜帶身份憑證的請求，服務(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)行修改。如果操作失敗，將會拋出異常。
跨域請求想要帶上 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)目中遇到的跨域問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Vue+Mockjs模擬curd接口請求的示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue?click事件傳遞參數(shù)--方法/教程/實(shí)例,本文用示例介紹Vue中事件傳參的方法，采用click這個事件進(jìn)行展示，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js創(chuàng)建Calendar日歷效果的過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue函數(shù)式組件的應(yīng)用實(shí)例詳解
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實(shí)例詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
在Vue中嵌入第三方頁面可以采用多種方法,例如使用<iframe>、Vue插件、動態(tài)加載第三方腳本或WebComponents,不同方法適用于不同類型的內(nèi)容和項(xiàng)目需求,如<iframe>適用于整個網(wǎng)頁,而動態(tài)腳本和WebComponents適合特定功能,選擇合適的方法可以有效整合外部資源2024-09-09
計算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測數(shù)據(jù)變化的一個屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 中的插槽在開發(fā)組件的過程中其實(shí)是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下2021-05-05