$.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了。但今天用$.ajax跨域请求的时候总是获取不到数据,用 fiddler一看确实抓到了数据,但回到$.ajax函数中,直接触发了error,没有触发success,即使状态码是200。用 apiclient或者浏览器直接访问都是ok的。搜罗一番。最终在这篇文章上面找到答案 。http://code.msdn.microsoft.com/windowsdesktop/Implementing-CORS-support-a677ab5d
原因
在默认情况下,为防止CSRF跨站伪造攻击,一个网页从另外一个域的网页获取数据的时候就会受到限制。有一些方法可以突破这个限制,JSONP就是其一。它使用<script> 标签加一个回调函数。但JSONP 只支持Get方法。而CORS(Cross-Origin Resource Sharing) 跨域资源共享,是一种新的header规范,可以让服务器端放松跨域的限制,可以根据header来切换限制或不限制跨域请求。它支持所有的Http请求 方式。跨域的资源请求带有一个Http header:Origin,如果服务器支持CORS,响应就会带有一个header:Access-Control-Allow-Origin ,也有一些特殊的请求。采用 HTTP “OPTIONS” 的方式,hearder中带有Access-Control-Request-Method或Access-Control-Request- Headers,服务器响应的hearder中需要带有Access-Control-Allow-Methods,Access-Control- Allow-Headers才行。
实现
那怎么实现CORS呢,这用到了Message Handler。它可以在管道中拦截并修改Request,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
public class CorsHandler : DelegatingHandler { const string Origin = "Origin" ; const string AccessControlRequestMethod = "Access-Control-Request-Method" ; const string AccessControlRequestHeaders = "Access-Control-Request-Headers" ; const string AccessControlAllowOrigin = "Access-Control-Allow-Origin" ; const string AccessControlAllowMethods = "Access-Control-Allow-Methods" ; const string AccessControlAllowHeaders = "Access-Control-Allow-Headers" ; protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { bool isCorsRequest = request.Headers.Contains(Origin); bool isPreflightRequest = request.Method == HttpMethod.Options; if (isCorsRequest) { if (isPreflightRequest) { return Task.Factory.StartNew<HttpResponseMessage>(() => { HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK); response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First()); string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault(); if (accessControlRequestMethod != null ) { response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod); } string requestedHeaders = string.Join( ", " , request.Headers.GetValues(AccessControlRequestHeaders)); if (!string.IsNullOrEmpty(requestedHeaders)) { response.Headers.Add(AccessControlAllowHeaders, requestedHeaders); } return response; }, cancellationToken); } else { return base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t => { HttpResponseMessage resp = t.Result; resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First()); return resp; }); } } else { return base.SendAsync(request, cancellationToken); } } } |
然后在Global中加入:
1
2
3
|
protected void Application_Start(object sender, EventArgs e) { GlobalConfiguration.Configuration.MessageHandlers.Add( new CorsHandler()); WebApiConfig.Register(GlobalConfiguration.Configuration); } |
脚本:
1
2
3
4
5
6
7
8
|
$.ajax({ // url: "http://localhost:11576/api/Values", url: "http://localhost:39959/api/user/login?name=niqiu&pwd=123456", type: "GET" , //contentType: "application/json;", success: function(result) { alert(result.status); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert( "出错!XMLHttpRequest:" + XMLHttpRequest.status); } }); |
这样访问就ok了。
出处:http://www.sxt.cn/info-2790-u-756.html
---------------------------------------------------------------------------------------------------------
但是过了一天就不起作用了,
webconfig下 <system.webServer> 加以下内容可搞定
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
<add name="Access-Control-Allow-Credentials" value="false" />
</customHeaders>
</httpProtocol>