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怎样实现ajax联动框(一)
Mar 08 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
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来写记数器(详细介绍)
2006/10/09 PHP
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
javascript 原型继承介绍
2011/08/30 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Python字典实现伪切片功能
2020/10/28 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
仓库班组长岗位职责
2013/12/12 职场文书
小学生美德少年事迹
2014/02/02 职场文书
元宵节主持词
2014/03/25 职场文书
取保候审保证书
2014/04/30 职场文书
军训口号
2014/06/13 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
事业单位考察材料范文
2014/12/25 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Java中的随机数Random
2022/03/17 Java/Android