跨域知识(一)——CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制。
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
一,简单请求
对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin
字段。
下面是一个简单的请求:
<h1>绕过浏览器禁止跨域请求的方案——CORS</h1>
<button id="bt1">请求数据</button>
<script src="jquery-1.11.3.js"></script>
<script>
$('#bt1').click(function(){
$.ajax({
url:'http://localhost/crossdomain/2.php',//跨域资源
type:'get',
success: function(result){
console.log('成功获取到服务器返回的数据')
console.log(result);
}
});
})
</script>
请求发送之后,浏览器发现这次跨源AJAX请求是简单请求,就自动在头信息之中,添加一个Origin
字段。
如果Origin
指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。这个回应的头信息
没有包含Access-Control-Allow-Origin
字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest
的onerror
回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。
报错的情况如下:
如果Origin
指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。
在这里:Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin
字段的值,要么是一个*
,表示接受任意域名的请求。
二、非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式
XMLHttpRequest
请求,否则就报错。
以下是JS脚本:
发送put请求,浏览器发现,这是一个非简单请求,就自动发出一个"预检"请求,要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。
"预检"请求用的请求方法是OPTIONS
,表示这个请求是用来询问的。头信息里面,关键字段是Origin
,表示请求来自哪个源。
除了Origin
字段,"预检"请求的头信息包括两个特殊字段。
(1)Access-Control-Request-Method
该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT
。
(2)Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。
2.1预检请求的回应
服务器收到"预检"请求以后,检查了Origin
、Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应。
如果浏览器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest
对象的onerror
回调函数捕获。控制台会打印出如下的报错信息。
同时,浏览器会只返回一个预检请求的php文件:
这个时候,需要在服务器端添加方法:
在响应头中的消息如下:
在这里,跨域请求成功。其中的方法:
(1)Access-Control-Allow-Methods
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求
2.2、浏览器的正常请求和回应
一旦服务器通过了"预检"请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin
头信息字段。
服务器的回应,也都会有一个Access-Control-Allow-Origin
头信息字段。
跨域知识(一)——CORS的更多相关文章
- AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载
1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...
- Javascript 跨域知识详细介绍
JS跨域知识总结: 在“跨域”一词经常性地出现以前,我们其实已经频繁地使用它了.如在A网站的img,src指向B网站的某一图片地址,毫无疑问,这在通常情况下都是能正常显示的(且不论防盗链技术):同样, ...
- 【fetch跨域请求】cors
当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing) 请求fetch const body = {name:"Good boy ...
- c# WebApi之解决跨域问题:Cors
什么是跨域问题 出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容.由于这个原因,我们不同站点之间的数据访问会被拒绝. Cors解决跨域问 ...
- 跨域资源共享(CORS)--跨域ajax
几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...
- 允许跨域资源共享(CORS)携带 Cookie (转载)
如何让CORS携带Cookie CORS 是一个 W3C 标准,全称是“跨域资源共享”(Cross-origin resource sharing).默认浏览器为了安全,遵循“同源策略”,不允许 Aj ...
- ajax跨域请求解决方案 CORS和JSONP
什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...
- [转]跨域问题(CORS / Access-Control-Allow-Origin)
原文链接:https://blog.csdn.net/xcbeyond/article/details/84453832 1.前言 最近在项目中,调用Eureka REST接口时,出现了CORS跨越问 ...
- ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS)
ylbtech-ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS) 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. ...
随机推荐
- pip安装requests报错unicodeEncodeError:'ascii' codec can\t encode charactesers in position 9-12:ordinal not in range(128)
前提 : 已经安装pip(pip的安装我参考的是本博客转载脚本之家的步骤,实验可以成功) 1. 在cmd输入命令转到pip安装目录: 2. 运行后出现错误 3. 步骤2中的错误应该和编码有关.搜索百度 ...
- MySQL数据库基本使用
一 .数据库概述 数据库就是以一定格式进行组织的数据的集合.通俗来看数据库就是用户计算机上 一些具有特殊格式的数据文件的集合. 数据库也可以理解为表格,大家都知道表格都是由表名.表头.数据等几部分组成 ...
- eureka注册中心设置用户名密码
1.加入安全认证依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- sql 书写顺序
SELECT select_list [ INTO new_table ] FROM table_source [ WHERE search_condition ] [ GROUP BY group_ ...
- qq邮箱问卷,测试不支持form表单
想做个类似苹果调查问卷的: 找到qq邮箱的代码编辑器: 写好我们的网页(h5) <!DOCTYPE html> <html lang="en"> <h ...
- tensorflow中张量的理解
自己通过网上查询的有关张量的解释,稍作整理. TensorFlow用张量这种数据结构来表示所有的数据.你可以把一个张量想象成一个n维的数组或列表.一个张量有一个静态类型和动态类型的维数.张量可以在图中 ...
- php连接数据库查询方法(还少一种pdo方法)
<?php header("content-type:text/html;charset=utf-8"); $conn = mysql_connect("local ...
- ckfinder图片上传成功,但无法打开This image failed to load.
原因是basedir和baseurl的问题 本地调试的时候 可以用 这种方式实现,但是部署到线上,就有问题
- Python操作数据库遇到的问题
网上教程很多,不多赘述,记录一下遇到的问题. 开始安装的是Python3.x最新版本,用的是pycharm,教程参考有 https://www.cnblogs.com/yufeihlf/p/60041 ...
- 如何获取SpringBoot项目的applicationContext对象
ApplicationContext对象是Spring开源框架的上下文对象实例,在项目运行时自动装载Handler内的所有信息到内存.传统的获取方式有很多种,不过随着Spring版本的不断迭代,官方也 ...