基於.Net Framework 4.0 Web API開發（5）：ASP.NET Web APIs AJAX 跨域請求解決辦法（CORS實現）

時間 2019-11-14

標籤基於 framework 4.0 web api 開發 asp.net asp apis ajax 請求解決辦法 cors 實現欄目 HTML 简体版

原文原文鏈接

概述：

　　ASP.NET Web API 的好用使用過的都知道，沒有複雜的配置文件，一個簡單的ApiController加上須要的Action就能工做。可是在使用API的時候總會遇到跨域請求的問題，
特別各類APP萬花齊放的今天，API的跨域請求是不能避免的。javascript

　　在默認狀況下，爲了防止CSRF跨站的僞造攻擊(或者是 javascript的同源策略（Same-Origin Policy）)，一個網頁從另一個域獲取數據時就會收到限制。有一些方法能夠突破這個限制，那就是你們熟知的JSONP，
固然這只是衆多解決方法中一種，因爲JSONP只支持GET的請求，現在的複雜業務中已經不能知足需求。而CORS（Cross Origin Resource Sharing https://www.w3.org/wiki/CORS）跨域資源共享，是一種新的header規範，
可讓服務器端放鬆跨域的限制，能夠根據header來切換限制或者不限制跨域請求。重要的是它支持全部http請求方式。html

問題：

　　 XMLHttpRequest 跨域 POST或GET請求，請求方式會自動變成OPTIONS的問題。
　　因爲CORS（cross origin resource share）規範的存在，瀏覽器會首先發送一次options嗅探，同時header帶上origin，判斷是否有跨域請求權限，服務器響應access control allow origin的值，
供瀏覽器與origin匹配，若是匹配則正式發送post請求，即使是服務器容許程序跨域訪問，若不支持 options 請求，請求也會死掉。java

緣由：

　　瀏覽器爲了安全起見，會Preflighted Request的透明服務器驗證機制支持開發人員使用自定義的頭部、GET或POST以外的方法，以及不一樣類型的主題內容，也就是會先發送一個 options 請求，
問問服務器是否會正確（容許）請求，確保請求發送是安全的。web

　　出現 OPTIONS 的狀況通常爲：
　　　　一、非GET 、POST請求
　　　　二、POST請求的content-type不是常規的三個：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表單）、multipart/form-data（同上，但主要用於表單提交時伴隨文件上傳的場合）、text/plain（純文本）　
　　　　三、POST請求的payload爲text/html　
　　　　四、設置自定義頭部windows

　　　　OPTIONS請求頭部中會包含如下頭部：Origin、Access-Control-Request-Method、Access-Control-Request-Headers，發送這個請求後，服務器能夠設置以下頭部與瀏覽器溝通來判斷是否容許這個請求。
　　　　Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers跨域

解決方法：

方法一：瀏覽器

　　此方法功能強大，能夠解決ASP.NET Web API複雜跨域請求，攜帶複雜頭部信息，正文內容和受權驗證信息安全

 1     public class CrosHandler : DelegatingHandler
 2     {
 3         private const string _origin = "Origin";
 4         private const string _accessControlRequestMethod = "Access-Control-Request-Method";
 5         private const string _accessControlRequestHeaders = "Access-Control-Request-Headers";
 6         private const string _accessControlAllowOrigin = "Access-Control-Allow-Origin";
 7         private const string _accessControlAllowMethods = "Access-Control-Allow-Methods";
 8         private const string _accessControlAllowHeaders = "Access-Control-Allow-Headers";
 9 
10         protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
11         {
12             bool isCrosRequest = request.Headers.Contains(_origin);
13             bool isPreflightRequest = request.Method == HttpMethod.Options;
14             if (isCrosRequest)
15             {
16                 Task<HttpResponseMessage> taskResult = null;
17                 if (isPreflightRequest)
18                 {
19                     taskResult = Task.Factory.StartNew<HttpResponseMessage>(() =>
20                     {
21                         HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
22                         response.Headers.Add(_accessControlAllowOrigin, request.Headers.GetValues(_origin).FirstOrDefault());
23                         string method = request.Headers.GetValues(_accessControlRequestMethod).FirstOrDefault();
24                         if (method != null)
25                         {
26                             response.Headers.Add(_accessControlAllowMethods, method);
27                         }
28                         string headers = string.Join(", ", request.Headers.GetValues(_accessControlRequestHeaders));
29                         if (!string.IsNullOrEmpty(headers))
30                         {
31                             response.Headers.Add(_accessControlAllowHeaders, headers);
32                         }
33                         return response;
34                     }, cancellationToken);
35                 }
36                 else
37                 {
38                     taskResult = base.SendAsync(request, cancellationToken)
39                         .ContinueWith<HttpResponseMessage>(t =>
40                         {
41                             var response = t.Result;
42                             response.Headers.Add(_accessControlAllowOrigin, request.Headers.GetValues(_origin).FirstOrDefault());
43                             return response;
44                         });
45                 }
46                 return taskResult;
47                 //return base.SendAsync(request, cancellationToken);
48             }
49             else
50             {
51                 return base.SendAsync(request, cancellationToken);
52             }
53         }
54     }

View Code

 1      protected void Application_Start()
 2         {
 3             IOCConfig.RegisterAll();
 4 
 5             AreaRegistration.RegisterAllAreas();
 6 
 7             WebApiConfig.Register(GlobalConfiguration.Configuration);
 8             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
 9             RouteConfig.RegisterRoutes(RouteTable.Routes);
10             BundleConfig.RegisterBundles(BundleTable.Bundles);
11 
12             GlobalConfiguration.Configuration.MessageHandlers.Add(new CrosHandler());
13         }

View Code

方法二：服務器

　　配置文件中添加以下配置，此方法簡單，應對簡單的跨域請求app

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