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