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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
OpenLayers实现图层切换控件
Sep 25 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Vue实现购物车功能
2017/04/27 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
keras topN显示,自编写代码案例
2020/07/03 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
记者岗位职责
2014/01/06 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
开业典礼主持词
2014/03/21 职场文书
施工安全生产承诺书
2014/05/23 职场文书
出生医学证明书
2014/09/15 职场文书
自主招生专家推荐信
2015/03/26 职场文书
培训通知书模板
2015/04/17 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android