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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
angular动态表单制作
Feb 23 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
JavaScript实现简单计时器
Jun 22 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
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
css3实现超炫风车特效
2014/11/12 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
教师自我鉴定范文
2014/03/20 职场文书
代办委托书怎样写
2014/04/08 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
文秘应届生求职信
2014/07/05 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书