WebApi2 jsonp跨域问题

来源:转载

一:故事背景    以前在写WebApi2的时候,一直是用作前后端分离(WebApi2 +angularjs),可是最近自己在给WebApp写接口的时候遇到了很多坑,总结一下就是跨域问题。而跨域问题在WebApi2中配置也是有点麻烦,不知道在2中是否有对jsonp跨域问题更好解决方案,如果有,跪求各位博友在分享自己的想法。    闲话少说,快速进入正题。二:使用Jsonp跨域    我们现在的客户端和服务器端都是写在同一个站点上面,那么当我们使用Jsonp进行传输数据的时候,格式应为如下:    当然这里的api/demo就是我们写的自己路由地址    可是如果后端什么都不配置,就会出现如下错误:通过jsonp的后端配置,返回的http转台玛终于从500变成了200,可是现在的问题就是,他始终不跳进success里面去,在网上找了很多解决方案都是不行,返回的即使是200,它也始终不跳进success里面去,所以,接下来我研究了jsonp的原理三:jsonp的原理    3.1 什么是jsonp    要了解JSONP,不得不提一下JSON,那么什么是JSON ?    JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
    3.2 jsonp为什么能跨域    由于同源策略的限制,XmlHttpRequest (ajax 调用)只允许调用当前站点的资源(域名、协议、端口)的资源,而我们知道,link 和script标签中的src是可以指向外网资源的,也就是我们通过这个我们是可以访问 ” 外面资源 “ 的,所以利用这一点,我们可以实现简单的跨域。    3.3 jsonp 跨域原理说明    当我们客户端向服务器发送请求的时候,客户端会注册一个回调参数(默认为callback),这个回调参数就是客户端和服务器进行认证的安全策略,服务器端获取到callback的值后,将返回的数据包裹(假如callback的注册值为jQuery21409887892813421786_1451718790536 ,那么返回的值就为:jQuery21409887892813421786_1451718790536({}))起来,然后发送给客户端,客户端首先解析script标签,并执行里面的值,通过注册的回掉参数,把返回的值给取出来,最后传入到客户端预先定义好的callback函数里面去(如果使用ajax jsonp 的话,那就是success了)。注意返回的要是可执行的js代码。如果你使用MVCController写Api的话很简单,只需要返回JavaScriptResult就可以了    3.4 额外说明        一旦使用jsonp,那么它和ajax 就不是同一种协议了,可是你可以在ajax中使用jsonp,可能在这一点上有点误导,大家一定要明白清楚。四:MVC Jsonp服务器端的简单配置    在mvc中,你只需要返回JavaScriptResult,它自动会添加Script标签,也不需要配置其它的东西。五:繁琐的WebApi2 jsonp跨域配置    5.1 我们要使返回的值为js文档,就需要修改返回值的Formatter,所以我们在这借鉴蒋大哥的示例代码:http://www.cnblogs.com/artech/archive/2013/12/05/3460544.html    这里是一个    (代码是截图的,可能效果不是很好,请大家见谅)在蒋大哥的代码中,它屏蔽掉了所有非HttpGet方式的请求,我在这里扩展了一下,所有类型的Http请求都可以进行访问。               然后我们的jsonp就可以进行跨域了返回的结果如下最后大家对格式格式进行转换一下就可以开心的进行跨域了

分享给朋友:
您可能感兴趣的文章:
随机阅读: