$.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,代码如下:

复制代码
复制代码
 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中加入:

 protected void Application_Start(object sender, EventArgs e)
        {
             GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler());
             WebApiConfig.Register(GlobalConfiguration.Configuration);
        }

脚本:

复制代码
复制代码
  $.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.cnblogs.com/soundcode/p/4054070.html ,如需转载请自行联系原作者
相关文章
|
26天前
|
人工智能 自然语言处理 搜索推荐
国内可用的 Web Search API,可以平替Bing Search API
近期人们发现,AI对搜索引擎的需求远远超过人类。这个团队专为AI打造搜索引擎,上线仅60天就已被调用超30万次。
国内可用的 Web Search API,可以平替Bing Search API
|
9天前
|
监控 前端开发 Serverless
现代化 Web 应用构建问题之观测站点的PV、UV和API异常等指标如何解决
现代化 Web 应用构建问题之观测站点的PV、UV和API异常等指标如何解决
21 2
|
16天前
|
XML 开发框架 .NET
ASP.NET Web Api 如何使用 Swagger 管理 API
ASP.NET Web Api 如何使用 Swagger 管理 API
|
19天前
|
缓存 JavaScript API
【颠覆想象!】Vue 3全新Reactivity API:解锁响应式编程的终极奥秘,让你的Web应用瞬间变身超能战士!
【8月更文挑战第12天】Vue 3带来了革新性的响应式系统,基于Proxy技术,提升了性能并提供了强大的API。本文通过示例介绍核心API `reactive` 和 `ref` 的使用,展示如何创建、更新响应式对象与引用,探讨深度响应式、响应式数组的管理,以及如何运用计算属性和侦听器优化应用。此外,还介绍了如何构建自定义响应式逻辑,让开发者能更高效地开发高性能Web应用。
27 1
|
19天前
|
Java API 数据库
【神操作!】Spring Boot打造RESTful API:从零到英雄,只需这几步,让你的Web应用瞬间飞起来!
【8月更文挑战第12天】构建RESTful API是现代Web开发的关键技术之一。Spring Boot因其实现简便且功能强大而深受开发者喜爱。本文以在线图书管理系统为例,展示了如何利用Spring Boot快速构建RESTful API。从项目初始化、实体定义到业务逻辑处理和服务接口实现,一步步引导读者完成API的搭建。通过集成JPA进行数据库操作,以及使用控制器类暴露HTTP端点,最终实现了书籍信息的增删查改功能。此过程不仅高效直观,而且易于维护和扩展。
30 1
|
7天前
|
API
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
|
23天前
|
存储 JavaScript 前端开发
Web Audio API 第6章 高级主题
Web Audio API 第6章 高级主题
|
23天前
|
存储 数据可视化 前端开发
Web Audio API 第5章 音频的分析与可视化
Web Audio API 第5章 音频的分析与可视化
|
23天前
|
算法 JavaScript 前端开发
Web Audio API 第4章 音调与频域
Web Audio API 第4章 音调与频域
|
23天前
|
编解码 自然语言处理 前端开发
Web Audio API 第3章 音量和响度
Web Audio API 第3章 音量和响度
下一篇
云函数