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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
jsPDF导出pdf示例
May 02 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
javascript中递归的两种写法
Jan 17 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
Java 生成随机字符的示例代码
Jan 13 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&amp;mysql(二)
2006/10/09 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python爬虫常用的模块分析
2014/08/29 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python while循环使用else语句代码实例
2020/02/07 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
优秀士兵先进事迹
2014/02/06 职场文书
药学职务聘任书
2014/03/29 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
同意报考公务员证明
2015/06/17 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
MySQL约束超详解
2021/09/04 MySQL