同源策略（Same Origin Policy）的存在導致了“源”自A的指令碼只能操作“同源”頁面的DOM，“跨源”操作來源於B的頁面將會被拒絕。同源策略以及跨域資源共享在大部分情況下針對的是Ajax請求。同源策略主要限制了通過XMLHttpRequest實現的Ajax請求，如果請求的是一個“異源”地址，瀏覽器將不允許讀取返回的內容。JSONP是一種常用的解決跨域資源共享的解決方案，現在我們利用ASP.NET Web API自身的擴充套件性提供一種“通用”的JSONP實現方案。

一、JsonpMediaTypeFormatter

在《[CORS：跨域資源共享] 同源策略與JSONP》，我們是在具體的Action方法中將返回的JSON物件“填充”到JavaScript回撥函式中，現在我們通過自定義的MediaTypeFormatter來為JSONP提供一種更為通用的實現方式。

我們通過繼承JsonMediaTypeFormatter定義瞭如下一個JsonpMediaTypeFormatter型別。它的只讀屬性Callback代表JavaScript回撥函式名稱，改屬性在建構函式中指定。在重寫的方法WriteToStreamAsync中，對於非JSONP呼叫（回撥函式不存在），我們直接呼叫基類的同名方法對響應物件實施針對JSON的序列化，否則呼叫WriteToStream方法將物件序列化後的JSON字串填充到JavaScript回撥函式中。

   1: public class JsonpMediaTypeFormatter : JsonMediaTypeFormatter

   2: {

   3:     public string Callback { get; private set; }

   4:  

   5:     public JsonpMediaTypeFormatter(string callback = null)

   6:     {

   7:         this.Callback = callback;

   8:     }

   9:  

  10:     public override Task WriteToStreamAsync(Type type, object value, Stream writeStream, HttpContent content, TransportContext transportContext)

  11:     {

  12:         if (string.IsNullOrEmpty(this.Callback))

  13:         {

  14:             return base.WriteToStreamAsync(type, value, writeStream, content, transportContext);

  15:         }

  16:         try

  17:         {

  18:             this.WriteToStream(type, value, writeStream, content);

  19:             return Task.FromResult<AsyncVoid>(new AsyncVoid());

  20:         }

  21:         catch (Exception exception)

  22:         {

  23:             TaskCompletionSource<AsyncVoid> source = new TaskCompletionSource<AsyncVoid>();

  24:             source.SetException(exception);

  25:             return source.Task;

  26:         }

  27:     }

  28:  

  29:     private void WriteToStream(Type type, object value, Stream writeStream, HttpContent content)

  30:     {

  31:         JsonSerializer serializer = JsonSerializer.Create(this.SerializerSettings);

  32:         using(StreamWriter streamWriter = new StreamWriter(writeStream, this.SupportedEncodings.First()))

  33:         using (JsonTextWriter jsonTextWriter = new JsonTextWriter(streamWriter) { CloseOutput = false })

  35:         {

  36:             jsonTextWriter.WriteRaw(this.Callback + "(");

  37:             serializer.Serialize(jsonTextWriter, value);

  38:             jsonTextWriter.WriteRaw(")");

  39:         }

  40:     }

  41:  

  42:     public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, HttpRequestMessage request, MediaTypeHeaderValue mediaType)

  43:     {

  44:         if (request.Method != HttpMethod.Get)

  45:         {

  46:             return this;

  47:         }

  48:         string callback;

  49:         if (request.GetQueryNameValuePairs().ToDictionary(pair => pair.Key, 

  50:              pair => pair.Value).TryGetValue("callback", out callback))

  51:         {

  52:             return new JsonpMediaTypeFormatter(callback);

  53:         }

  54:         return this;

  55:     }

  56:  

  57:     [StructLayout(LayoutKind.Sequential, Size = 1)]

  58:     private struct AsyncVoid

  59:     {}

  60: }

我們重寫了GetPerRequestFormatterInstance方法，在預設情況下，當ASP.NET Web API採用內容協商機制選擇出與當前請求相匹配的MediaTypeFormatter後，會呼叫此方法來建立真正用於序列化響應結果的MediaTypeFormatter物件。在重寫的這個GetPerRequestFormatterInstance方法中，我們嘗試從請求的URL中得到攜帶的JavaScript回撥函式名稱，即一個名為“callback”的查詢字串。如果回撥函式名不存在，則直接返回自身，否則返回據此建立的JsonpMediaTypeFormatter物件。

二、將JsonpMediaTypeFormatter的應用到ASP.NET Web API中

接下來我們通過於一個簡單的例項來演示同源策略針對跨域Ajax請求的限制。如圖右圖所示，我們利用Visual Studio在同一個解決方案中建立了兩個Web應用。從專案名稱可以看出，WebApi和MvcApp分別為ASP.NET Web API和MVC應用，後者是Web API的呼叫者。我們直接採用預設的IIS Express作為兩個應用的宿主，並且固定了埠號：WebApi和MvcApp的埠號分別為“3721”和“9527”，所以指向兩個應用的URI肯定不可能是同源的。

我們在WebApi應用中定義瞭如下一個繼承自ApiController的ContactsController型別，它具有的唯一Action方法GetAllContacts返回一組聯絡人列表。

   1: public class ContactsController : ApiController

   2: {

   3:     public IEnumerable<Contact> GetAllContacts()

   4:     {

   5:         Contact[] contacts = new Contact[]

   6:         {

   7:             new Contact{ Name="張三", PhoneNo="123", EmailAddress="[email protected]"},

   8:             new Contact{ Name="李四", PhoneNo="456", EmailAddress="[email protected]"},

   9:             new Contact{ Name="王五", PhoneNo="789", EmailAddress="[email protected]"},

  10:         };

  11:         return contacts;

  12:     }

  13: }

  14:  

  15: public class Contact

  16: {

  17:     public string Name { get; set; }

  18:     public string PhoneNo { get; set; }

  19:     public string EmailAddress { get; set; }

  20: }

現在我們在WebApi應用的Global.asax中利用如下的程式建立這個JsonpMediaTypeFormatter物件並添加當前註冊的MediaTypeFormatter列表中。為了讓它被優先選擇，我們將這個JsonpMediaTypeFormatter物件放在此列表的最前端。

   1: public class WebApiApplication : System.Web.HttpApplication

   2: {

   3:     protected void Application_Start()

   4:     {

   5:         GlobalConfiguration.Configuration.Formatters.Insert(0, new JsonpMediaTypeFormatter ());

   6:         //其他操作

   7:     }

   8: }

接下來們在MvcApp應用中定義如下一個HomeController，預設的Action方法Index會將對應的View呈現出來。

   1: public class HomeController : Controller

   2: {

   3:     public ActionResult Index()

   4:     {

   5:         return View();

   6:     }

   7: }

如下所示的是Action方法Index對應View的定義。我們的目的在於：當頁面成功載入之後以Ajax請求的形式呼叫上面定義的Web API獲取聯絡人列表，並將自呈現在頁面上。如下面的程式碼片斷所示，我們直接呼叫$.ajax方法並將dataType引數設定為“jsonp”。

   1: <html>

   2: <head>

   3:     <title>聯絡人列表</title>

   4:     <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.10.2.js")"></script>

   5: </head>

   6: <body>

   7:     <ul id="contacts"></ul>

   8:     <script type="text/javascript">

   9:         $(function ()

  10:         {

  11:             $.ajax({

  12:                 Type       : "GET",

  13:                 url        : "http://localhost:3721/api/contacts",

  14:                 dataType   : "jsonp",

  15:                 success    : listContacts

  16:             });

  17:         });

  18:  

  19:         function listContacts(contacts) {

  20:             $.each(contacts, function (index, contact) {

  21:                 var html = "<li><ul>";

  22:                 html += "<li>Name: " + contact.Name + "</li>";

  23:                 html += "<li>Phone No:" + contact.PhoneNo + "</li>";

  24:                 html += "<li>Email Address: " + contact.EmailAddress + "</li>";

  25:                 html += "</ul>";

  26:                 $("#contacts").append($(html));

  27:             });

  28:         }

  29:     </script>

  30: </body>

  31: </html>

直接執行該ASP.NET MVC程式之後，會得到如下圖所示的輸出結果，通過跨域呼叫Web API獲得的聯絡人列表正常地顯示出來。

三、針對JSONP的請求和響應

如下所示的針對JSONP的Ajax請求和響應內容。可以看到請求的URL中通過查詢字串“callback”提供了JavaScript回撥函式的名稱，而響應的主體部分不是單純的JSON物件，而是將JSON物件填充到回撥返回中而生成的一個函式呼叫語句。

   2: Host: localhost:3721

   3: Connection: keep-alive

   4: Accept: */*

   5: User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36

   6: Referer: http://localhost:9527/

   7: Accept-Encoding: gzip,deflate,sdch

   8:  

   9: HTTP/1.1 200 OK

  10: Cache-Control: no-cache

  11: Pragma: no-cache

  12: Content-Type: application/json; charset=utf-8

  13: Expires: -1

  14: Server: Microsoft-IIS/8.0

  15: X-AspNet-Version: 4.0.30319

  16: X-SourceFiles: =?UTF-8?B?RTpc5oiR55qE6JGX5L2cXEFTUC5ORVQgV2ViIEFQSeahhuaetuaPreenmFxOZXcgU2FtcGxlc1xDaGFwdGVyIDE0XFMxNDAzXFdlYkFwaVxhcGlcY29ud?=

  17: X-Powered-By: ASP.NET

  18: Date: Thu, 05 Dec 2013 08:38:15 GMT

  19: Content-Length: 248

  20:  

  21: jQuery110205729522893670946_1386232694513([{"Name":"張三","PhoneNo":"123","EmailAddress":"[email protected]"},{"Name":"李四","PhoneNo":"456","EmailAddress":"[email protected]"},{"Name":"王五","PhoneNo":"789","EmailAddress":[email protected]}])