問題描述:
在使用ASP.NET的MVC5進行WebAPI開發的時候,在跨域的情況下會報跨域的錯,
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9090' is therefore not allowed access.
解決辦法(一):
服務端設置響應頭,在webapi的web.config做如下設置,加在<system.webServer>節點下
<httpProtocol> <!--跨域配置開始--> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <!--支持全域名訪問,不安全,部署后需要固定限制為客戶端網址--> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> <!--支持的http 動作--> <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" /> <!--響應頭 請按照自己需求添加 這里新加了token這個headers--> <add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> <!--允許請求的http 動作--> </customHeaders> <!--跨域配置結束--> </httpProtocol>
配置完啟動server,然后再次訪問
再次報錯
Object {readyState: 4, responseText: "{"Message":"已拒絕為此請求授權。"}", responseJSON: Object, status: 401, statusText: "Unauthorized"}
解決辦法是:
Controller加上[AllowAnonymous]特性
修改后重新啟動,再次訪問,成功!
解決辦法(二):
[EnableCors(origins: "*", headers: "*", methods: "*")]
Web API 中對 CORS 的支持是一個完整框架,允許應用程序定義 CORS 請求的權限。 該框架圍繞一個策略方案展開,該策略方案可讓您指定針對進入應用程序的任何給定請求而允許的 CORS 功能。
首先,為了獲取該 CORS 框架,您必須從 Web API 應用程序引用 CORS 庫(默認情況下,Visual Studio 2013 中的任何 Web API 模板都不引用這些庫)。 該 Web API CORS 框架通過 NuGet 作為 Microsoft.AspNet.WebApi.Cors 程序包提供。 在nuget中輸入
Install-Package Microsoft.AspNet.WebApi.Cors
注意 Web api 2對,net framework的要求必須是4.5以上,安裝完上面的package后,會發現引用中多了兩個重要的包,如下圖所示
接下來,為了表達該策略,Web API 提供了一個名為 EnableCorsAttribute 的自定義屬性類。 此類包含允許的域、HTTP 方法、請求標頭、響應標頭以及是否允許使用憑據等方面的屬性(它們對前面所述的 CORS 規范的所有詳細信息進行建模)。
最后,為了讓 Web API CORS 框架處理 CORS 請求並發出適當的 CORS 響應標頭,該類必須檢查進入應用程序的每個請求。 Web API 通過消息處理程序提供用於這種攔截操作的擴展點。 Web API CORS 框架會相應地實現一個名為 CorsMessageHandler 的消息處理程序。 對於 CORS 請求,該處理程序會查詢在所調用方法的屬性中表達的策略,並發出適當的 CORS 響應標頭。
EnableCorsAttribute。EnableCorsAttribute 類就是應用程序表達其 CORS 策略的方式。EnableCorsAttribute 類有一個可接受三個或四個參數的重載構造函數。 這些參數(依次)為:
- 允許域列表
- 允許請求標頭列表
- 允許 HTTP 方法列表
- 允許響應標頭列表(可選)
還有一個允許使用憑據的屬性 (SupportsCredentials) 以及另一個用於指定預檢緩存持續時間值的屬性 (PreflightMaxAge)。
以vs2013建立的默認api程序為例,建完webapi引用程序后在Controller文件夾下會自動生成兩個控制區,一個HomeController和一個ValueController,我們主要看一下ValueControll,這個控制器繼承了ApiController,可見是一個webapi,我們在valueController上添加一個全局的 EnableCors屬性,以試它支持跨域,如下圖所示
請注意,每個構造函數參數都是一個字符串。 通過指定逗號分隔列表,可以表示多個值。 如果您想允許所有域、請求標頭或 HTTP 方法,則可以使用“*”作為值(對於響應標頭仍須顯式指定)。
除在方法級別應用 EnableCors 屬性外,還可以在類級別應用該屬性,或將其全局應用於應用程序。 應用該屬性的級別會在 Web API 代碼中為該級別及下面級別的所有請求配置 CORS。 例如,如果在方法級別應用該策略,則該策略僅應用於該操作的請求,而如果在類級別應用該策略,則該策略將應用於對該控制器的所有請求。 最后,如果全局應用該策略,則該策略將應用於所有請求。
如果在多個位置存在策略,則會使用“最接近的”屬性,並忽略其他屬性(優先順序是方法、類、全局)。 如果您已在較高級別上應用策略,但隨后想在較低級別上排除某一請求,則可以使用名為 DisableCorsAttribute 的另一個屬性類。 此屬性實質上是一個沒有允許權限的策略。
如果在您不想允許 CORS 的控制器上有其他方法,則有兩個選擇。 首先,您可在 HTTP 方法列表中顯式指定。 或者,您可以保留通配符,但使用 DisableCors 屬性來排除 Delete 方法。
還有個地方特別容易忽略,就是安裝完了,代碼上也加上了這個注解了,但是還是不好用,那就去檢查自己的
App_Start下的WebApiConfig.cs文件,里面是不是加上了這個EnableCors