跨域资源分享CORS

简介

出于安全性的考虑，XMLHttpRequest和Fetch API遵循同源策略，也就是说使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。为了解决跨域调用资源的问题，cors机制应运而生。
cors用于服务器标识除自身外哪些origin(域名，协议，端口)可以进行访问。通过发送preflight 请求验证该origin是否有访问权限，再决定后续是否继续发送真实请求。

跨域请求

Preflight

这些请求会预先给服务器发送一个OPTIONS请求，获取服务器是否允许实际请求的发送。

OPTIONS实例如下：

其中
Access-Control-Request-Method告知服务器实际请求的方法，这里实际请求方法为POST。
Access-Control-Request-Headers表明实际请求携带首部字段，这里实际请求将携带Content-Type字段。

接下来是cors成功时，服务器响应：
Access-Control-Allow-Origin表示服务器允许访问域，这里服务器仅允许本机的8081端口访问，也就是实际请求的发送端。如果服务器返回*则表示允许任意域访问
Access-Control-Allow-Methods表示服务器允许的访问方法，这里允许通过POST方法访问
Access-Control-Allow-Headers表示请求中允许的字段，这里服务器允许Content-Type
Access-Control-Max-Age表明该响应的有效时间为 1800 秒，也就是30分钟.在有效期内，浏览器不对同一请求再次进行preflight验证。关于该值，浏览器自身也维护了一个最长有效期，如果字段设定值超过浏览器自身的最长有效期，那么该字段不会生效。

如果服务器返回信息不匹配就会收到如下错误
access control allow origin head contains the invalid “…”.Origin is therefore not allow access.

preflight全过程如下

简单请求

并不是所有跨域请求都会进行preflight验证，但是仍需要服务器返回匹配origin信息，否则依旧无法访问。
简单请求过程如下

参考资料：
Cross-Origin Resource Sharing (CORS)