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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
jquery操作angularjs对象
Jun 26 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
HTML+JS实现在线朗读器
Feb 15 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
JS原生数据双向绑定实现代码
2017/08/14 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Vue中使用Sortable的示例代码
2018/04/07 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
tensorflow识别自己手写数字
2018/03/14 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python面向对象之Web静态服务器
2019/09/03 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
keras中的History对象用法
2020/06/19 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
化学相关工作求职信
2013/10/02 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电