CORS预检请求详谈
引言
最近在项目中因前后端部署不同地方,前端在请求后端api时发生了跨域请求,我们采用CORS
(跨域资源共享)来解决跨域请求,这需要前后端的配合来完成。在这一过程中,后端支持了CORS跨域请求后,前端的请求配置可能会调起CORS的preflight请求,也就是我们所说的预检请求。对CORS不太熟悉的可能会很容易忽视掉这个问题。下面就来说说CORS的preflight请求。CORS的基本用法不在本文讨论中,可以参考阮老师的跨站资源共享CORS详解。
CORS prefligt请求
preflight请求,就是在发生cors请求时,浏览器检测到跨域请求,会自动发出一个OPTIONS
请求来检测本次请求是否被服务器接受。一个OPTIONS请求一般会携带下面两个与CORS相关的头:
Access-Control-Request-Method
: 本次预检请求的请求方法。Access-Control-Request-Headers
:本次请求所携带的自定义首部字段。这些字段是导致产生OPTIONS请求的一个原因。后面会讲到。
这样,服务端收到该预检请求后,会返回与CORS相关的响应头。主要会包括下面几个,但可能还会有其他的有关CORS字段:
Access-Control-Allow-Origin
: 服务器允许的跨域请求源Access-Control-Allow-Methods
: 服务器允许的请求方法Access-Control-Allow-Headers
: 服务器允许的自定义的请求首部字段
服务器通过CORS跨域请求后,下面浏览器就会发生正式的数据请求。整个请求过程其实是发生了两次请求:一个预检请求,通过后的实际数据请求。这些都可以在浏览器网络请求中看到。可以参考下图:
需要注意的是:
1、在上面的两次请求中,预检请求只是一个检查的过程,它不会携带任何请求的参数;预检通过后的请求才会真正的携带请求参数与服务器进行数据通信。
2、若服务器对预检请求没有任何响应,那么浏览器不知道服务器是否支持CORS而不会发送后续的实际请求;或者服务器不支持当前的Origin跨域访问也不会发送后续请求。
发生preflight请求的条件
上面的预检请求并不是CORS请求的必须的请求过程,在一定的条件下并不需要发生预检请求。那么发生预检请求的条件是什么呢?根据HTTP访问控制(CORS)介绍,其实发生预检请求的条件:是否是简单请求。简单请求则直接发送具体的请求而不会产生预检请求。具体来说如下:
满足下面的所有条件就不会产生预检请求,也就是该请求是简单请求:
请求方法是
GET
、POST
、HEAD
其中任意一个必须是下面定义对CORS安全的首部字段集合,不能是集合之外的其他首部字段。
Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。Content-Type的值必须是
text/plain
、multipart/form-data
、application/x-www-form-urlencoded
中任意一个值
满足上面所有的条件才不会发送预检请求,在实际项目中我们的请求格式可能是application/json
格式编码,或者使用自定义请求头都会触发CORS的预检请求。
所以,在项目中是否会触发CORS的预检请求要做到心中有数。
一个发送的预检请求的列子
我们拿一个实际发生预检请求的例子来说明整个过程。考虑下面的一个例子:
var xhr = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
function callCors(){
if(xhr)
{
xhr.open('POST', url, true);
xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = handler;
xhr.send(body);
}
}
......
上面请求中在请求中添加了自定义首部字段X-PINGOTHER,并且请求的Content-Type
值application/xml。因此该请求首先会触发一个预检请求。具体的过程见下图
通过上图可以看到请求实际产生了2次与服务交互的过程,最后一次会将请求参数传给服务器。这样一个CORS请求过程就完成了。
需要注意的一个有关CORS的点:
对于附带身份凭证的请求(即服务器设置Access-Control-Allow-Credentials: true),服务器不得设置 Access-Control-Allow-Origin 的值为“*”。否则请求将会失败。
个人理解是Cookie还是遵循同源策略的,即使因为这个请求是跨域请求,所以每个Origin的Cookie是不能被其他Origin获取到的,也就是不允许Access-Control-Allow-Origin 的值为“*”。
参考文献
1、跨域资源共享 CORS 详解
2、HTTP访问控制(CORS)
3、CORS - How do 'preflight' an httprequest?
CORS预检请求详谈的更多相关文章
- ASP Net Core – CORS 预检请求
CORS(跨源资源共享)是一种机制,它允许同一个来源运行的Web应用程序从在另一个来源运行的服务器访问资源.同源策略是一种非常严格的措施,因为它只允许与服务器起源于同一源的应用程序访问其资源.很多时候 ...
- Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)
https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
- 跨域请求中预检请求options之坑
一.前言 因为跨域请求,浏览器可能(后面讲)会发送一次options请求,如果处理不好,跨域还是会gg的. 之前很少涉及跨域,涉及也是简单请求(下面阮老师文章中区别热简单请求和复杂请求),所以基本不会 ...
- 对CROS OPTIONS预检请求的一些思考
前后端分离模大势所趋,跨域问题更是老生常谈. 问题背景: 浏览器最基本的安全规范-同源策略.所谓同源是指域名.协议.端口相同.不同源的浏览器脚本(javascript.ActionScript.can ...
- OPTIONS预检请求
OPTIONS预检请求 背景:像后台发送一个post请求,出错,错误代码403(权限验证未通过),查看请求方法变成OPTIONS.检查请求头得知,当前请求token未带上,问题,为什么post请求变成 ...
- preflight request预检请求
preflight request预检请求,负责检查是否允许跨域请求,但是注意并不是所有的跨域请求都会发送preflight请求.对与那些幂等的请求,如GET请求,就不会发送preflight请求.只 ...
- 在fetch方法中添加header后遇到的预检请求问题
今天在使用fetch方法 fetch('xxx.com',{header:{bbbbbbb:111}}) 浏览器返回的请求信息中,header变成了 :authority:koss.nocorp.me ...
- web api 设置允许跨域,并设置预检请求时间
<httpProtocol> <customHeaders> <!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)--> <ad ...
- 跨域时发送预检请求,tp5的restful无options方法的解决方案
解决 跨域问题解决 问题:使用vue-resource发送delete请求时报options请求404 思考:明明发送的是delete请求,为何变成了options请求? 答:跨域情况下,PUT,DE ...
随机推荐
- I - Intersection HDU - 5120(圆环相交面积)
Matt is a big fan of logo design. Recently he falls in love with logo made up by rings. The followin ...
- html浏览器存储连续多个空格,只显示一个空格
这个问题找了很久,发现css的 white-space:pre 完美解决 .white-space { white-space:pre }
- 【Kafka源码】SocketServer启动过程
SocketServer主要用于接收外部的网络请求,并把请求添加到请求队列中. 一.入口 在KafkaServer.scala中的start方法中,有这样的入口: socketServer = new ...
- 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别
其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...
- 《剑指offer》面试题的Python实现
<剑指Offer>是很多程序员面试前要看的书,但里面的算法都是基于C++实现的,最近用了三周左右时间,用Python完成了里面几乎所有的算法题,由于时间以及个人水平均有限,或许会有部分问题 ...
- Oracle.ManagedDataAccess.dll 连接Oracle数据库不需要安装客户端
最开始,连接Oracle 数据是需要安装客户端的,ado.net 后来由于微软未来不再支持 System.Data.OracleClient 这个 Data Provider 的研发,从 .NET 4 ...
- C#中简单的this与get的用法(string,decimal)
代码 namespace First{publicpartialclass Form1 : Form{public Form1(){InitializeComponent();} privatevoi ...
- 雅虎公司C#笔试题及参考答案
Question 1. (单选) 在计算机网络中,表征数据传输可靠性的指标是——21. 传输率2. 误码率3. 信息容量4. 频带利用率Question 2. (单选) 以下关于链式存储结构的叙述中哪 ...
- Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors...java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are
先将异常信息贴出: 该问题是tomcat进行http request解析的时候报的错,网上的解决办法主要是修改Tomcat的server.xml,在<Connector port="8 ...
- C#进阶--WebApi异常处理机制
其实对于C#异常处理大家都不陌生,但是对于在WeiApi上的异常处理实际上也和传统异常处理区别不大,但是却经过封装可以让异常更加友好,https://docs.microsoft.com/en-us/ ...