首頁 > web前端 > js教程 > 如何正確解決Vue 專案中遇到跨域問題

如何正確解決Vue 專案中遇到跨域問題

php中世界最好的语言
發布: 2018-05-26 14:01:28
原創
5868 人瀏覽過

這次帶給大家如何正確解決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中文網其它相關文章!

推薦閱讀:

怎麼處理vue頁面載入閃爍

#如何使用js取得ModelAndView值

以上是如何正確解決Vue 專案中遇到跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板