Vue 項目中遇到的跨域問題及解決方法

原文：https://www.jb51.net/article/137278.htm

問題描述

前端 vue 框架，跨域問題後臺加這段代碼 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
}

跟以前同樣就好了。

總結

1.不限定跨域地址，不攜帶身份憑證

.NET CORE

services.AddCors(
                options => options.AddPolicy(
                    _defaultCorsPolicyName,
                    builder => builder 
                        .AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials()
                )
            );

PHP後臺代碼：

header("Access-Control-Allow-Origin: *");

前端代碼：

xhrFields: {
 withCredentials: false
},

2.指定受權訪問地址，攜帶身份憑證（帶cookies）

.NET CORE

services.AddCors(
                options => options.AddPolicy(
                    _defaultCorsPolicyName,
                    builder => builder
						.WithOrigins(
							// App:CorsOrigins 在 appsettings.json 中，可配多個地址
							_appConfiguration["App:CorsOrigins"]
							   .Split(",", StringSplitOptions.RemoveEmptyEntries)
								.Select(o => o.RemovePostFix("/"))
								.ToArray()
						) 
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials()
                )
            );

PHP後臺代碼：

Access-Control-Allow-Origin: 'http://www.zrt.local:8080'
Access-Control-Allow-Credentials: true

前端代碼：

crossDomain: true, 
xhrFields: {
  withCredentials: true
}