web api 跨域請求，ajax跨域調用webapi

標籤：

1、跨域問題僅僅發生在Javascript發起AJAX調用，或者Silverlight發起服務調用時，其根本原因是因為瀏覽器對於這兩種請求，所給予的許可權是較低的，通常只允許調用本域中的資源，除非目標伺服器明確地告知它允許跨域調用。假設我們頁面或者應用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取資料。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。

2、什麼是跨域呢？

JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。通常來說,跨域分為以下幾類：在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。 3、當發起AJAX跨域（cross domain）調用ASP.NET MVC或者ASP.NET Web API編寫的服務時，會發生無法訪問的情況。出現如下錯誤資訊在這裡跟大家解釋一下 Access-Control-Allow-Origin是HTML5中定義的一種伺服器端返回Response header，用來解決資源（比如字型）的跨域許可權問題。當Access-Control-Allow-Origin後面跟URL 或 *，如果是 URL 則只會允許來自該 URL 的請求，* 則允許任何域的請求例如：header(‘Access-Control-Allow-Origin:http://A.abc.com‘)||header(‘Access-Control-Allow-Origin:*‘)意思是說只有當你請求的資源被允許跨域的時候才可以被訪問。那麼我們該怎麼設定Access-Control-Allow-Origin呢？ 4、第一種是用JSONP來獲得跨域的資料，而WebAPI本身是不支援javascript的callback的 比較一下json與jsonp格式的區別：json格式：

{    "message":"擷取成功",    "state":"1",    "result":{"name":"工作群組1","id":1,"description":"11"}}

jsonp格式：

callback({    "message":"擷取成功",    "state":"1",    "result":{"name":"工作群組1","id":1,"description":"11"}})

看出來區別了吧，在url中callback傳到背景參數是神馬callback就是神馬，jsonp比json外面有多了一層，callback()。

只需要給全域註冊一個JsonCallbackAttribute，就可以判斷介面的訪問是屬於跨域，還是非跨域，正常的返回。

因為我們的介面，可能是用來給 移動端（Android 、IOS）做資料介面，也有可能是給網站用，所以，考慮到可能存在跨域的問題。

   GlobalConfiguration.Configuration.Filters.Add(new JsonCallbackAttribute());

 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());                //context.Response.Content = new StringContent("C(\"a\")");            }            base.OnActionExecuted(context);        }        private bool IsJsonp(out string callback)        {            callback = System.Web.HttpContext.Current.Request.QueryString[CallbackQueryParameter];            return !string.IsNullOrEmpty(callback);        }

結合下面圖片不難開出，請求的地址帶回了，callback的參數標識。

當然也可以用解決跨域問題的jQuery外掛程式-jquery-jsonp，有第一種方式的基礎，使用jsonp外掛程式也就比較簡單了，server端代碼無需任何改動。

5、服務端直接修改設定檔，個人認為這種方式好一點，畢竟我們所寫的api是對外公開的，安全訪問的控制還是要通過其他方法來保證。

針對ASP.NET MVC，只需要在web.config中添加如下的內容即可

<system.webServer>

<httpProtocol>

<customHeaders>

<add name="Access-Control-Allow-Origin" value="*" />

<add name="Access-Control-Allow-Headers" value="Content-Type" />

<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

</customHeaders>

</httpProtocol>

<handlers>

<remove name="ExtensionlessUrlHandler-Integrated-4.0" />

<remove name="OPTIONSVerbHandler" />

<remove name="TRACEVerbHandler" />

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

</system.webServer>

  

針對ASP.NET Web API,除了上面這樣的設定，還需要添加一個特殊的設計，就是為每個APIController添加一個OPTIONS的方法，但無需返回任何東西。

public string Options()

{

return null; // HTTP 200 response with empty body

}

6、還有用CORS（跨域資源共用，Cross-Origin Resource Sharing）來解決的， CORS定義一種跨域訪問的機制，可以讓AJAX實現跨域訪問。CORS 允許一個域上的網路應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡單，只需由伺服器發送一個響應標題即可。

hander() 設定， “*”號表示允許任何域向我們的服務端提交請求：     

　　也可以設定指定的網域名稱，如網域名稱 http://www.test2.com ，那麼就允許來自這個網域名稱的請求：

     這種沒有仔細研究，其實跟上面的設定檔，差不多，都是去設定回應標頭。 本文是結合好多其他作者的文章：http://www.cnblogs.com/chenxizhang/p/3821703.htmlhttp://www.cnblogs.com/sunxucool/p/3433992.htmlhttp://www.cnblogs.com/Darren_code/p/cors.html

web api 跨域請求，ajax跨域調用webapi