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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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的十大要点(上)
2009/02/04 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php购物车实现方法
2015/01/03 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
医药专业推荐信
2013/11/15 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
校园环保建议书
2014/05/14 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers