關於AJAX跨域調用ASP.NET MVC或者WebAPI服務的問題及解決方案
問題描述
當跨域(cross domain)調用ASP.NET MVC或者ASP.NET Web API編寫的服務時,會發生無法訪問的情況。
重現方式
- 使用模板創建一個最簡單的ASP.NET Web API項目,調試起來確認能正常工作
- 創建另外一個項目,僅僅包含一個HTML頁面,發起AJAX的調用
-
在瀏覽器中打開這個網頁,我們會發現如下的錯誤(405:Method Not Allowed)
【備註】同樣的情況,也發生在ASP.NET MVC中。某些時候,MVC也可以直接用來開發服務,與WebAPI相比各有優缺點。下面是一個利用MVC開發的服務的例子
原因分析
跨域問題僅僅發生在Javascript發起AJAX調用,或者Silverlight發起服務調用時,其根本原因是因為瀏覽器對於這兩種請求,所給予的權限是較低的,通常只允許調用本域中的資源,除非目標服務器明確地告知它允許跨域調用。
所以,跨域的問題雖然是由於瀏覽器的行為產生出來的,但解決的方法卻是在服務端。因為不可能要求所有客戶端降低安全性。
解決方案
針對ASP.NET MVC和ASP.NET Web 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
}
關於AJAX跨域調用ASP.NET MVC或者WebAPI服務的問題及解決方案