当jQuery.ajax()的jsonp碰上post

综合编程 简书 (源链)

来源,以前一直以为当$.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参数

您可能感兴趣的

TIL about Datalist and Display Limits I’ve blogged about the element a few times before (I’ll link to them at the end of this article), and while support is ok (if you ignore Safari a...
JQuery $ post () R... i have a html/javascript frontend and a php backend and wanted to transmit a json-stringarray from my frontend to backend with ajax. Unfortunately ...
CloudMapper, open-source tool for visualizing AWS ... CloudMapper CloudMapper generates network diagrams of Amazon Web Services (AWS) environments and display them via your browser. It helps you underst...
用whistle实现map local web本地开发调试过程中,经常需要用本地文件替换请求或者将请求转发到本地的指定服务器,即map local功能,而实际中用到的map local功能往往会遇到各种更加复杂的情形,比如请求url里面包含md5,替换combo请求,替换jsonp请求,有时还需要对不同页面发出的请求替换不同文件或...
AngularJS, RequireJS, JQuery l... I'm developing simple AngularJS (I'm quite new with Angular) application and I encountered problem that js are loading in wrong order. Below there are...
简书责编内容来自:简书 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 当jQuery.ajax()的jsonp碰上post



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录