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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
javascript replace方法与正则表达式
Feb 19 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
详解vue中axios的封装
Jul 18 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
nestjs返回给前端数据格式的封装实现
Feb 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函数代码
2013/08/29 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
Java里面有没有全局变量?为什么?
2015/02/06 面试题
2014年元旦活动方案
2014/02/15 职场文书
推荐信范文大全
2015/03/27 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL