浅析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 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
js分页工具实例
Jan 28 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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
写一个用户在线显示的程序
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
第一节英语课开场白
2015/06/01 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript