跨域请求的完美解决方法(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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP编程函数安全篇
2013/01/08 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
简单的js表单验证函数
2013/10/28 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
五一劳动节活动记录
2014/03/23 职场文书
社会学专业求职信
2014/07/17 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
出售房屋委托书范本
2014/09/24 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python