cors响应头未生效的一次拍错历程

下午前端童鞋调用api遇到跨域访问错误:

我先是在 api 接口响应处 增加了 CORS 响应头:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST,GET,OPTIONS,DELETE,HEAD,PUT");
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie, UserData,Authorization');

前端再次调用后 依然出现了 cors 错误:

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

经过查找相关资料发现:

通常理解下: 客户端发起 POST 请求会先发起一次 OPTIONS 请求, 再发起真正的 POST 请求; 而 GET 请求是只执行一次.

但是 现代浏览器在处理跨域请求时有额外的安全策略:

CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）

当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，浏览器会先以 OPTIONS 请求方式发送一个预请求(preflight request)，称之为预检。浏览器会先询问服务器，当前网页所在域名是否在服务器的许可名单之中，服务器允许之后，浏览器才会发出正式的XMLHttpRequest请求，否则会报错。

所以需要将 OPTIONS 请求单独进行处理, 增加下列行代码, 解决.

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS')
{
    header('HTTP/1.1 204');
    exit;
}

参考文章