跨域訪問之CORS
阿新 • • 發佈：2017-07-16
基本 支持 oar 技術分享 過程 ets attribute 響應 api
CORS:定義
2014年1月16日，W3C的Web應用工作組（Web Applications Working Group）和Web應用安全工作組（Web AppSec）聯合發布了跨源資源共享（Cross-Origin Resource Sharing）的W3C正式推薦標準（W3C Recommendation）。該標準定義了在必須訪問跨域資源時，瀏覽器與服務端應該如何溝通，它提供一種機制，允許客戶端（如瀏覽器）對非源站點的資源發出訪問請求。所有提供跨源資源請求的API都可以使用本規範中定義的算法。
出於安全性的考慮，用戶代理（如瀏覽器）通常拒絕跨站的訪問請求，但這會限制運行在用戶代理的Web應用通過Ajax或者其他機制從另一個站點訪問資源、獲取數據。跨源資源共享（CORS）擴充了這個模型，通過使用自定義的HTTP響應頭部（HTTP
Response Header），通知瀏覽器資源可能被哪些跨源站點以何種HTTP方法獲得。例如，瀏覽器在訪問 http://example.com 站點的Web應用時，Web應用如果需要跨站訪問另一站點的資源 http://hello-world.example，就需要使用該標準。http://hello-world.example 在HTTP的響應頭部中定義 Access-Control-Allow-Origin:
http://example.org，通知瀏覽器允許 http://example.org 跨源從 http://hello-world.example上獲取資源。
CORS 圖解
過程說明：
1 瀏覽器發出跨域訪問請求，request header 攜帶 origin
2 服務器收到請求，服務器返回response header
3 瀏覽區檢查reponse header ,如果Access-Control-Allow-Origin : 包含request header的Origin,那麽瀏覽器認為這是安全操作，允許操作服務端返回的數據，否則瀏覽器認為非同源數據，不允許操作。
目前主流的瀏覽器基本都支持CORS規範，所以實現CORS跨域訪問的關鍵就是Server 端返回的respone中添加 Access-Control-Allow-Origin：對應的請求origin.
Web API 如何實現跨域請求:
服務端代碼
類說明：
- CorsAttribute：請求跨域的標記
- CorsMessageHandler:
攔截請求，確認請求是否允許跨域，如果允許，那麽給response header 添加跨域請求 Access-Control-Allow-Origin，否則返回
{
"Message": "Cross-origin request denied"
}
代碼：
using System; using System.Collections.Generic;using System.Linq; using System.Net.Http; using System.Threading; using System.Threading.Tasks; using System.Web; using System.Web.Http; using System.Web.Http.Controllers; using System.Net; using System.Diagnostics; namespace Hbb0b0.MVC.CORS { /// <summary> /// 跨域屬性 /// 此處參考 /// asp.net webapi 2 /// /// </summary> public class CorsAttribute : Attribute { /// <summary> /// 允許的站點列表 /// </summary> public Uri[] AllowOrigins { get; private set; } /// <summary> /// 錯誤提示 /// </summary> public string ErrorMessage { get; set; } /// <summary> /// 構造函數 /// </summary> /// <param name="allowOrigins"></param> public CorsAttribute(params string[] allowOrigins) { this.AllowOrigins = (allowOrigins ?? new string[0]).Select(p => new Uri(p)).ToArray(); } /// <summary> /// 獲取請求頭信息，判斷是否請求被允許跨域 /// </summary> /// <param name="request"></param> /// <param name="headers"></param> /// <returns></returns> public bool TryEvaluate(HttpRequestMessage request, out IDictionary<string, string> headers) { headers = null; string origin = request.Headers.GetValues(HttpHeaderKeys.ORIGIN).FirstOrDefault(); Uri originUrl = new Uri(origin); if (this.AllowOrigins.Contains(originUrl)) { headers = this.GenerateResposeHeaders(request); return true; } this.ErrorMessage = "Cross-origin request denied"; return false; } /// <summary> /// 添加跨域許可請求頭 /// </summary> /// <param name="request"></param> /// <returns></returns> private IDictionary<string, string> GenerateResposeHeaders(HttpRequestMessage request) { string origin = request.Headers.GetValues("Origin").First(); Dictionary<string, string> headers = new Dictionary<string, string>(); headers.Add(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_ORIGIN, origin); if (request.IsPreflightRequest()) { headers.Add(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_ORIGIN, "*"); string requestHeaders = request.Headers.GetValues(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_REQUEST_HEADERS).FirstOrDefault(); if (!string.IsNullOrEmpty(requestHeaders)) { headers.Add(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_REQUEST_HEADERS, requestHeaders); } } return headers; } } /// <summary> /// Http Header keys /// </summary> public class HttpHeaderKeys { public const string ORIGIN = "Origin"; public const string ACCESS_CONTROL_ALLOW_ORIGIN = "Access-Control-Allow-Origin"; public const string ACCESS_CONTROL_ALLOW_REQUEST_METHOD = "Access-Control-Allow-Request-Methods"; public const string ACCESS_CONTROL_ALLOW_REQUEST_HEADERS = "Access-Control-Allow-Request-Headers"; } /// <summary> /// 判斷是否是非簡單跨域請求擴展方法 /// </summary> public static class HttpRequestMessageExtensions { public static bool IsPreflightRequest(this HttpRequestMessage request) { return request.Method == HttpMethod.Options && request.Headers.GetValues(HttpHeaderKeys.ORIGIN).Any() && request.Headers.GetValues(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_REQUEST_METHOD).Any(); } } public class CorsMessageHandler : DelegatingHandler { protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { //Debugger.Break(); HttpMethod originalMethod = request.Method; bool isPreflightRequest = request.IsPreflightRequest(); if (isPreflightRequest) { string method = request.Headers.GetValues(HttpHeaderKeys.ACCESS_CONTROL_ALLOW_REQUEST_HEADERS).FirstOrDefault(); request.Method = new HttpMethod(method); } HttpConfiguration config = request.GetConfiguration(); HttpControllerDescriptor description = config.Services.GetHttpControllerSelector().SelectController(request); HttpControllerContext context = new HttpControllerContext(request.GetConfiguration(), request.GetRouteData(), request) { ControllerDescriptor = description }; HttpActionDescriptor actionDescriptor = config.Services.GetActionSelector().SelectAction(context); CorsAttribute corsAttribute = actionDescriptor.GetCustomAttributes<CorsAttribute>().FirstOrDefault(); if (corsAttribute == null) { return base.SendAsync(request, cancellationToken); } IDictionary<string, string> headers; request.Method = originalMethod; HttpResponseMessage response = null; //判斷請求是否被授權 bool authorized = corsAttribute.TryEvaluate(request, out headers); //處理非簡單跨域請求 if (isPreflightRequest) { if (authorized) { response = new HttpResponseMessage(HttpStatusCode.OK); } } //簡單跨域請求 else { //如果授權，返回請求資源 if (authorized) { response = base.SendAsync(request, cancellationToken).Result; } //非授權，返回錯誤信息 else { response = request.CreateErrorResponse(HttpStatusCode.BadRequest, corsAttribute.ErrorMessage); } } //添加header if (headers!=null) { foreach (var item in headers) { response.Headers.Add(item.Key, item.Value); } } return Task.FromResult<HttpResponseMessage>(response); } } }
客戶端代碼：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>View</title> <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $.ajax({ type: "POST", async: false, url: "http://localhost/Hbb0b0.mvc.API/api/StudentAPI/", beforeSend: function (xmlHttpRequest) { //xmlHttpRequest.setRequestHeader("Origin", "http://hbb0b0notebook:51929/"); }, success: function (data) { //alert(data.name); console.log(data); getStudentList(data); }, error: function () { alert(‘fail‘); } }); }); function getStudentList(list) { console.debug("GetStudenListCors", list); $.each(list, function (index, student) { var html = "<ul>"; html += "<li> name:" + student.Name + "</li>" html += "</ul>"; $("#divStudentList").append(html); }); } </script> </head> <body> <div id="divStudentList"> </div> </body> </html>
運行結果
Request Header:
Response header:
結論
CORS 作為W3C官方正式的跨域資源訪問方案，不像JSONP 是一種臨時方案。
CORS 不對請求類型做限制，get, post 都支持，JSONPzhi只支持get. 所以 CORS比JSONP更通用，更是主流的跨域資源訪問請求解決方案。
本文參考了<<asp.net webapi 2 框架解密>>,此書的確是深入剖析asp.net 框架的好書。
跨域訪問之CORS