浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法


Posted in Javascript onFebruary 06, 2017

由于同源策略的缘故,ajax不能向不同域的网站发出请求。

比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php

请求的代码如下:

<html> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript"> 
 $.get("http://www.walk-sing.com/api.php", function(data){ 
   alert("Data Loaded: " + data); 
  }); 
</script> 
<body> 
</body> 
</html>

访问该页面,页面空白,按F12打开控制台,可以看到截图所示信息:

浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

解决方案1:jsonp

我们先来看这样一个例子:

<html> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript"> 
 function alertSomething(data){ 
  alert(data.name+data.age); 
 } 
 alertSomething( 
   {"name":"ben","age":24} 
   ); 
// $.get("http://www.walk-sing.com/api.php", function(data){ 
//  alert("Data Loaded: " + data); 
//  }); 
</script> 
<body> 
</body> 
</html>

执行结果:

浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

我们也可以这样写:

<html> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript"> 
 function alertSomething(data){ 
  alert(data.name+data.age); 
 }; 
// $.get("http://www.walk-sing.com/api.php", function(data){ 
// alert("Data Loaded: " + data); 
// }); 
</script> 
<script type="text/javascript" src="alertsomething.js"></script> 
<body> 
</body> 
</html>

alertsomething.js的内容如下:

alertSomething( 
   {"name":"ben","age":24} 
   );

也可以得到截图所示结果。

我们再换一个方式,将alertsomething.js上传到服务器,将代码改为如下形式:

<html> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript"> 
 function alertSomething(data){ 
  alert(data.name+data.age); 
 }; 
// $.get("http://www.walk-sing.com/api.php", function(data){ 
// alert("Data Loaded: " + data); 
// }); 
</script> 
<script type="text/javascript" src="http://www.walk-sing.com/alertsomething.js"></script> 
<body> 
</body> 
</html>

也可以得到截图所示结果。

不知道大家发现没有,script标签没有同源策略的限制,jsonp正是基于此原理实现的。

jsonp的具体实现可参见如下代码:

jsonp.php

<?php 
$method = isset($_GET['callback']) ? $_GET['callback'] : ''; 
if(!isset($method)){ 
 exit('bad request'); 
} 
$testArr = array( 
 'name' => 'ben', 
 'age' => 23 
); 
echo $method.'('.json_encode($testArr).')';

js代码:

<html> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript"> 
 function alertSomething(data){ 
  alert(data.name+data.age); 
 }; 
// $.get("http://www.walk-sing.com/api.php", function(data){ 
// alert("Data Loaded: " + data); 
// }); 
</script> 
<script type="text/javascript" src="http://www.walk-sing.com/jsonp.php?callback=alertSomething"></script> 
<body> 
</body> 
</html>

也可以得到截图所示结果。

解决方案二:CORS(跨域资源共享,Cross-Origin Resource Sharing)

不知道大家发现了没有,jsonp只能发送get请求,而如果业务中需要用到post请求时,jsonp就无能为力了。

这时候cors(跨域资源共享,Cross-Origin Resource Sharing)就派上用处了。

CORS的原理:

CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
就拿前面第一个例子来说,我只要在api.php文件头加上如下一句话即可:

header('access-control-allow-origin:*');

再次请求该接口,结果如下截图所示:

浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

以上所述是小编给大家介绍的jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 Javascript
canvas实现图像布局填充功能
Feb 06 #Javascript
canvas实现图像截取功能
Feb 06 #Javascript
JS跨域请求外部服务器的资源
Feb 06 #Javascript
canvas实现动态小球重叠效果
Feb 06 #Javascript
canvas滤镜效果实现代码
Feb 06 #Javascript
canvas实现图像放大镜
Feb 06 #Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python GUI模拟实现计算器
2020/06/22 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
2014年大学生就业规划书
2014/04/04 职场文书
单位在职证明书
2014/09/11 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
《实心球》教学反思
2016/02/23 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android