当jQuery.ajax()的jsonp碰上post

作者: 布衣小酱 | 来源:发表于2017-07-01 22:45 被阅读851次

来源,以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑。

关于跨域请求与jsonp

  • 跨域:由于受到同源策略(协议、域名、端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了。跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明。
  • jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,因此在chrome的network面板中的xhr标签下看不到jsonp的跨域请求,在js标签下能看到。就是利用script标签中src不受同源策略的限制,前端定义了回调函数,请求的js脚本中获取数据,并执行前端的回调函数,因此前后端需要统一定义下回调函数名。
  • $.ajax中jsonp,$.ajax对jsonp进行了封装看起来像是ajax请求。由于jsonp是针对get请求的跨域解决,因此之前的经验告诉我,即使type设置了post,在jsonp的时候,也会自动转换成get,直到有一天踩了个坑。翻看$.ajax模块的源码发现,只有去手动设置crossDomain为true,或者实际上是跨域,才会设置为get。否则还是填入的type
image.png image.png
  • 结论:手动设置crossDomain为true,或者真的是跨域,才会修改type为GET,否则还是传入的type参数

相关文章

  • 当jQuery.ajax()的jsonp碰上post

    来源,以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置...

  • 当axios碰上了post

    最近在vue项目中用到了axios,写法很简洁,还基于promise,我们后端跨域解决方案用的是CORS(Cros...

  • jQuery Ajax

    jQuery.ajax([settings]) type:类型,"POST"或"GET",默认为"GET"url:...

  • jQuery上的Ajax

    jQuery.ajax([settings]) type:类型,"POST" 或 "GET",默认为 "GET"u...

  • lesson35-JSONP

    为什么JSONP不支持POST请求? 因为JSONP是通过动态创建 实现的 动态创建 无法发起POST请求

  • jQuery.ajax.jsonp

    jQuery.ajax.jsonp 本文转载于饥人谷课件,转载请注明来源,谢谢! jQuery.ajax( [se...

  • JSONP理解和实现

    JSONP的格式 JSONP 不支持 POST的原因 i、因为JSONP是通过创建script实现的 ii、动态创...

  • 2018-03-26 腾讯电面

    1、Jsonp的原理,如何利用Jsonp发送post请求? JSONP动态插入 元素,为其src属性指定一个跨域U...

  • day02-vuejs-vue-resource实现get, p

    vue-resource实现get, post, jsonp]请求: JSONP的实现原理: 由于浏览器的安全性限...

  • JSONP

    JSONP(只能发送get请求,不支持post、put、delete;不安全xss攻击) jsonp的详细介绍在...

网友评论

    本文标题:当jQuery.ajax()的jsonp碰上post

    本文链接:https://www.haomeiwen.com/subject/zomtnttx.html