Vue專案中跨域問題及處理方式

這次帶給大家Vue專案中跨域問題及處理方式，Vue專案中跨域問題及處理方式的注意事項有哪些，以下就是實戰案例，一起來看一下。

問題描述

前端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###，如果你沒加上面那段程式碼當然也不會報這個錯。雖然是解決方法很簡單，但經此發現許多知識沒掌握不得不梳理下。 ######•HTTP 請求方式有許多種，有些請求會觸發 CORS 預檢請求。 「需預檢的請求」會使用 OPTIONS 方法發起預檢請求到伺服器，以獲知伺服器是否允許該實際請求。 ######•對於跨網域請求瀏覽器一般不會傳送身分憑證資訊。如果要傳送憑證訊息，需要設定 XMLHttpRequest 的 withCredentials ###屬性###為 true：withCredentials: true。此時要求伺服器的回應訊息中攜帶 Access-Control-Allow-Credentials: true，否則回應內容將不會回傳。 ######•對於攜帶身分憑證的請求，伺服器不得設定 ###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
}

###跟之前一樣就行了。 ######相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########js取得ModelAndView後如何使用################jQuery實作輸入文字超過規定行數時自動添加省略號#########

以上是Vue專案中跨域問題及處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！