详解js跨域请求的两种方式,支持post请求


Posted in Javascript onMay 05, 2018

JSONP实现跨域

常用的jquery实现跨域调用

$.ajax({
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
  dataType: "jsonp",
  jsonp: "callback",
  context: document.body,
  success: function(data) {
    console.log(data);
  }
});

这个调用实际上的实现原理是
在网页中构造一个script标签,将src设置为对应的url,并增加上相应的callback参数,形如如下格式:

<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>

请求的服务端代码如下:

$data   = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";

实际上最后返回的内容就是一段js代码:

jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})

当浏览器获取到该段js代码后就会执行这个函数,从而实现回调ajax请求时设置的success方法。

jsonp实现的缺点

了解了原理后,就知道jsonp实现的跨域方式不支持post请求,只能支持get请求。但是如果需要支持post请求该怎么办呢?下面谈下服务器端设置的方式。

服务端设置支持跨域

主要是Access-Control-Allow-Origin头参数,该参数用来指定允许哪个来源的域请求。服务端代码如下:

// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;

对应的js代码:

$.ajax({
  type: "POST",
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
  dataType: "json",
  success: function(data) {
    console.log(data);
  }
});

可以支持post请求。

小结

实际上个人并不是特别喜欢用跨域请求的方式,可能会带来一些不可预见的安全问题。比较习惯的方式通过本域下的服务端和跨域的源服务器进行交互。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
javascript验证身份证号
Mar 03 Javascript
再谈JavaScript线程
Jul 10 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
You might like
基于mysql的论坛(1)
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
文秘专业自荐信
2013/10/14 职场文书
职工运动会感言
2014/02/07 职场文书
文明寄语大全
2014/04/11 职场文书
学习方法演讲稿
2014/05/10 职场文书
奶茶店创业计划书
2014/08/14 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
个人股份合作协议书
2014/10/24 职场文书
单位租房协议范本
2014/12/03 职场文书
党员自评材料范文
2014/12/17 职场文书
五年级上册复习计划
2015/01/19 职场文书
机械生产实习心得体会
2016/01/22 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL