跨域请求的完美解决方法(JSONP, CORS)


Posted in Javascript onJune 12, 2016

一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题。解决方法有JSONP,Flash等等。

JSONP

我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>。那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称,就可以用下面的形式来就加载JSON数据。

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

服务端当然也要提供JSONP的支持,其实只要提供读写callback这个params就可以了。

跨域资源共享(CORS)

Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。

CORS与JSONP相比,更为先进、方便和可靠。

1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。

对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。

Header set Access-Control-Allow-Origin * 

为了防止XSS攻击我们的服务器, 我们可以限制域,比如

Access-Control-Allow-Origin: https://3water.com

很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。

以上这篇跨域请求的完美解决方法(JSONP, CORS)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
JS的反射问题
Apr 07 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
浅谈jquery的map()和each()方法
Jun 12 #Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 #Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 #Javascript
使用Script元素发送JSONP请求的方法
Jun 12 #Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 #Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 #Javascript
Javascript简写条件语句(推荐)
Jun 12 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
js返回上一页并刷新代码整理
2012/12/21 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python实现自主查询实时天气
2018/06/22 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python中的协程深入理解
2019/06/10 Python
pygame实现成语填空游戏
2019/10/29 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
商场总经理岗位职责
2014/02/03 职场文书
工程索赔意向书
2014/08/30 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015年公务员工作总结
2015/04/24 职场文书
2015教师节通讯稿
2015/07/20 职场文书