vue 预检_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跨域请求后，下面浏览器就会发生正式的数据请求。整个请求过程其实是发生了两次请求：一个预检请求，通过后的实际数据请求。这些都可以在浏览器网络请求中看到。可以参考下