1. 程式人生 > >ASP.NET WebAPI2複雜請求跨域設定

ASP.NET WebAPI2複雜請求跨域設定

ASP.Net Core的跨域設定比較簡單  官方都整合了 具體的參見微軟官方文件:

https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-3.1#ecors

 

跨域條件

跨域是指的當前資源訪問其他資源時發起的http請求由於安全原因(由於同源策略,域名、協議、埠中只要有一個不同就不同源),瀏覽器限制了這些請求的正常訪問,特別需要注意的是這些發生在瀏覽器中。

 

解決方法

方法1.web.config檔案中的 system.webServer 節點下 增加如下配置:

1 <system.webServer>
2 <httpProtocol>
3 <customHeaders>
4 <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
5 <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
6 <add name="Access-Control-Allow-Origin" value="*" />
7 </customHeaders>
8 </httpProtocol>
9 </system.webServer>


方法2.Nuget包引用Microsoft.AspNet.Cors,然後在控制器上新增特性
[EnableCors(origins: "*", headers: "*", methods: "*")]

 

注意以上兩種方法,不要重複設定,設定了兩次會報錯 'Access-Control-Allow-Origin' header contains multiple values '*, *',。

 

複雜請求問題
以上兩個方法,僅對簡單跨域請求有效,無法處理複雜的跨域請求。
簡單請求:請求方法是GET/HEAD/POST,並且contentType為text/plain、application/x-www-form-urlencoded、multipart/form-data。
不滿足上述條件的視為複雜請求,開發中我們常觸發這個條件大多因為我們的請求的contentType設定的是application/json導致的。
注意:簡單請求如果設定了Authentication認證header也會讓請求“升級”為複雜請求。
複雜請求會在正式通訊之前,增加一次HTTP查詢請求,稱為"預檢"請求(preflight)。瀏覽器先詢問伺服器,當前網頁所在的域名是否在伺服器的許可名單之中,以及可以使用哪些HTTP動詞和頭資訊欄位。只有得到肯定答覆,瀏覽器才會發出正式的XMLHttpRequest請求,否則就報錯,而這次preflight的Http方法就是Options。換句話說,如果你的xhr請求發出前,會先發出一個Options請求,就說明你要執行的請求是複雜請求。

複雜請求處理
在Global.asax檔案中,通過Application_BeginRequest方法進行處理:

 1 protected override void Application_BeginRequest(object sender, EventArgs e)
 2 {
 3 //直接設定所有的可跨域訪問
 4 Response.Headers.Add("Access-Control-Allow-Origin",”*“);
 5 if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")//攔截處理Options請求
 6 {
 7 Response.Headers.Add("Access-Control-Allow-Headers", "*");
 8 Response.Headers.Add("Access-Control-Allow-Methods", "*");
 9 Response.Flush();
10 Response.End();
11 }
12 base.Application_BeginRequest(sender, e);
13 }

這樣,對Options跨域請求進行了“可支援跨域”的應答,之後的正式請求到達控制器中的Action,又有相應的跨域訪問處理。那麼對於整個的複雜請求跨域就完成實現了。

 

微軟官方參考:https://docs.microsoft.com/zh-cn/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api