注册网站名称,网站建设方案书 内容管理制度,网站制作费一般多少,wordpress 2.6引言 最近在项目中因前后端部署不同地方#xff0c;前端在请求后端api时发生了跨域请求#xff0c;我们采用CORS(跨域资源共享)来解决跨域请求#xff0c;这需要前后端的配合来完成。在这一过程中#xff0c;后端支持了CORS跨域请求后#xff0c;前端的请求配置可能会调起…引言 最近在项目中因前后端部署不同地方前端在请求后端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 version1.0?personnameArun/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? 转载于:https://www.cnblogs.com/wonyun/p/CORS_preflight.html
