重新整理 .net core 實踐篇————跨域問題四十一]


前言

簡單整理一下.net core 的跨域問題,這個以前也整理過比較詳細的,故而在此簡單整理一下。

正文

對跨域相對的就是同源,什么是同源呢?

  1. 協議相同(http/https)

  2. 主機(域名)相同

  3. 端口相同

如果全部滿足這個三個條件就是同源,否者就是跨域。

跨域請求大概是下面這個過程:

從上面中看到,這些行為都是瀏覽器自己發起的檢驗,而不是我們的用戶的行為。

那么就有兩點東西就值得關注了。

  1. 假如a.com和b.com都是我的網站,現在我希望a.com訪問b.com的東西。

這時候出現了瀏覽器出現報錯,那么怎么辦呢?b網站是否應該做什么呢?

  1. 安全問題,我就只希望a.com去訪問b.com,其他網站不允許。

上文圖片中顯示了,瀏覽器會發送一個options請求判斷是否允許請求,那么這個請求是什么呢?或者它包含什么呢?

首先這個請求是options,然后其頭部包括。

  1. origin 請求源

  2. Access-Control-Request-Method 瀏覽器請求的方法,比如說post,get

  3. Access-Control-Request-Headers 是指我們請求發起的請求頭

那么我們的服務器需要響應:

  1. Access-Control-Allow-Origin 是否允許跨域

  2. Access-Control-Allow-Credentials 是否允許攜帶我們的認證信息,比如cookie信息

  3. Access-Control-Expose-Headers 允許跨域請求的腳本訪問到響應頭的信息

  4. Access-Control-Max-Age 有效跨域的時間,如果時間過了瀏覽器還有再次過來請求是否可以通過請求

  5. Access-Control-Allow-Methods 允許的http方法

  6. Access-Control-Allow-Headers 允許的http頭

也就是說瀏覽器需要告訴服務器我們請求的信息是怎么樣的,需要哪個域名來訪問、請求的方法是什么,需要訪問的請求的頭部信息是什么。

現在假設我們拿到這些信息了,查看origin通過,看下請求Access-Control-Request-Method是post也通過,然后查看一下Access-Control-Request-Headers,比如這個值是X-Custom-token。

那么如果我們允許用戶請求的header里面有X-Custom-token的話,那么在回復里面Access-Control-Allow-Methods就應該是:Access-Control-Allow-Methods:X-Custom-token。

Access-Control-Request-Headers 上面還是有點繞哈:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Headers 直接看這個。

如上上述滿足origin 和 Access-Control-Request-Method 的話,那么我在響應包的頭部加入Access-Control-Allow-Origin:true,否則就是在Access-Control-Allow-Origin:false。

這里說明一下,如果options 請求Access-Control-Request-Headers里面的值,我們不同意的話,同樣可以返回Access-Control-Allow-Origin 為true, Access-Control-Allow-Headers可以不返回,但是在請求的時候會出現用戶自定義的header不會傳輸到我們的后台。

故而,如果Access-Control-Request-Headers 不滿足的時候,個人認為設置可以Access-Control-Allow-Origin為true,這樣表示是允許跨域的,但是自定義的一些header沒有意義故而不傳輸。

同時Access-Control-Allow-Credentials:true,告訴瀏覽器請求的時候可以攜帶我們的認證信息,這個認證信息一般是Cookie。

Access-Control-Expose-Headers 這個是什么意思呢? 比如說a.com訪問b.com,響應的頭部有一個Good:aaa,也就是自定義頭部。

那么我們就需要在Access-Control-Expose-Headers寫Good這個頭部信息(Access-Control-Expose-Headers:Good)運行對a.com的js訪問到,否則js無法訪問到自定義頭部的。

Access-Control-Max-Age 就是跨域檢測的有效期,就是過了這段時間還是要詢問是否可以請求,因為到時候可能就變卦了。

這個還是很重要的。

Access-Control-Allow-Methods 和 Access-Control-Allow-Headers就是告訴瀏覽器,服務器對這個origin 允許的方法和頭部,如果符合下次就不要再來問一次了。

這些屬性都可以去查https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers。

下面介紹如何設置跨域請求:

配置服務:

services.AddCors(options =>
{
	options.AddPolicy("api", builder =>
	{
		builder.WithOrigins("https://localhost:5000").AllowAnyHeader().AllowCredentials().WithExposedHeaders();
	});
});

加入中間件:

app.UseCors();

具體的請求加入屬性頭:

[EnableCors("api")]
[HttpPost]
public IActionResult Pay()
{
	return Content(User.FindFirst("name").Value+"買買買");
}

這里用postman測試一下檢測部分的請求。

下一節

.net core 的緩存問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM