Jsonp post 跨域方案


Posted in Javascript onJuly 06, 2015

近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下。

说明:
http://www.t1.com/index.php 服务端URL
当然这是我本地配置的,需要改为自己对应的地址。

客户端代码:

<script>
  $(function(){
     
    var url = 'http://www.t1.com/index.php';
    $.ajax({
      type:      'post',
      url:      url,
      data:      {name:'wangyulu'},
      dataType:    'jsonp',
      success:function(result){
        console.log(result);
      }
    });
     
  });
 </script>

服务端代码:

<?php
if($_POST){
  $arr = array('name'=>$_POST['name'], 'age'=>23);
  echo json_encode($arr);
}

浏览器运行如下图:

Jsonp post 跨域方案

看下运行结果,即使设置传送方式为 post,Jquery也会自动转为 get,难道Jsonp真的不支持 post 方式提交吗,继续折腾...

折腾到现在最终在 stackoverflow 里找到一些关于这方面的资料,看来老外也遇到这样问题呀,地址贴给大家
http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery

关键点如下图:

Jsonp post 跨域方案

看上图我们发现,箭头标记处有变化,先不管这么多了,折腾这么久了,先对应放到程序里再说嘛,万一可以呢

客户端更改:
添加:crossDomain: true
修改:dataType: "json"

服务端添加:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

运行结果如下图:

Jsonp post 跨域方案

Jsonp post 跨域方案

到这里我们发现问题终于解决了,但我们详细观察发现,请求时间那是个漫长啊,,,看来老外也没个效率高的解决方案,

最后,我想说的是,要想完美支持POST方式的JSONP真心不好办啊,咱就到这吧,折腾不少时间了。

以上内容可能会关联到其它技术点,有兴趣自己可去研究哈,这里主要解决 Jsonp ,写的不好,大家请勿吐槽,谢谢!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
子页向父页传值示例
Nov 27 Javascript
js实现汉字排序的方法
Jul 23 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
javascript运动详解
Jul 06 #Javascript
浅谈jQuery中height与width
Jul 06 #Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 #Javascript
浅谈Javascript实现继承的方法
Jul 06 #Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 #Javascript
jQuery 遍历函数详解
Jul 05 #Javascript
You might like
Yii配置文件用法详解
2014/12/04 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
组织关系转移介绍信
2014/01/16 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
大学生励志演讲稿
2014/04/25 职场文书
实习单位评语
2014/04/26 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2014年药店工作总结
2014/11/20 职场文书
鲁冰花观后感
2015/06/10 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android