ASP.NET Web API 跨域訪問（CORS）要注意的地方

標籤：

一、用戶端用JSONP請求資料

 

如果你想用JSONP來獲得跨域的資料，WebAPI本身是不支援javascript的callback的，它返回的JSON是這樣的：

{"YourSignature": "嫁人要嫁程式員，錢多話少死得早"}

然而，JSONP請求期望得到這樣的JSON：

jQuery123456({"YourSignature": "嫁人要嫁程式員，錢多話少死得早"})

所以我們需要對WebAPI做拓展，讓它支援這樣的callback。我找到了兩種辦法。

自己寫個Attribute，來給返回的JSON包上callback

 

public class JsonCallbackAttribute : ActionFilterAttribute{    private const string CallbackQueryParameter = "callback";    public override void OnActionExecuted(HttpActionExecutedContext context)    {        var callback = string.Empty;        if (IsJsonp(out callback))        {            var jsonBuilder = new StringBuilder(callback);            jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);            context.Response.Content = new StringContent(jsonBuilder.ToString());        }        base.OnActionExecuted(context);    }    private bool IsJsonp(out string callback)    {        callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];        return !string.IsNullOrEmpty(callback);    }}

 

然後在要被調用的方法前加上這個Attribute：

        [JsonCallback]        [HttpGet]        public HttpResponseMessage a()        {            string strJson = "{\"info\" : \"true\"}";            var result = new HttpResponseMessage(HttpStatusCode.OK)            {                Content = new StringContent(strJson, Encoding.UTF8, "text/plain")            };            return result;        }

 

非常簡潔明了，但是這種方法有個缺點，就是被加了[JsonCallback]的方法，只能適用於JSONP的請求。如果你希望API能被各種場合的用戶端調用，還是在服務端提供支援吧。

2. 通過自訂JsonMediaTypeFormatter實現

 

參見 Artech大神的文章：http://www.cnblogs.com/artech/p/cors-4-asp-net-web-api-03.html

 

支援CORS最地道的方法當然是在服務端提供支援，按官網的辦法，100%成功。http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

 

主要步驟是：

1. 到nuget上裝一個包：http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors/

2. 在WebApiConfig.Register方法中加入代碼：

config.EnableCors();

3. 在Controller上加上Attribute：

[EnableCors(origins: "http://myclient.azurewebsites.net", headers: "*", methods: "*")]

這個網域名稱是可以配置的，具體還請參考上面給出的官網教程。

最後，還要告訴大家一個坑，在服務端完提供支援以後，不要高興的太早，如果你用jQuery.ajax()的方式去請求，還是會爆的：

$.ajax({    url: ‘yourCORSurl‘,    data: ‘‘,    dataType: ‘json‘,    type: ‘GET‘,    contentType: ‘application/json; charset=utf-8‘,    ...})

經過無數次爆破，終於發現，只要把dataType和contentType兩個參數去掉，就肯定不會爆了！！！

ASP.NET Web API 跨域訪問（CORS）要注意的地方