跨域-CORS

一、概念：

跨源资源共享：（Cross-Origin Resource Sharing）
访问控制：Access Control，后面会看到以Access-Control前缀的头部字段。

二、引入背景：

JS中的xhr请求（XMLHttpRequest）受同源策略限制。但是这也导致有些合理的请求也被限制了。W3C提出了新的标准CORS来解决这个问题。CORS机制让服务端控制是否准许跨域请求（当然了也要承担确保安全的职责）。教程参考MDN（即MDN的参考），下面做些总结性的笔记。

三、CORS原理

3.1 浏览器和服务端的谈判

服务端：hi，我说你管的也太多了！我认为request A是安全的，你怎么不发给我？
浏览器：我怎么知道request A是安全。为了安全起见，我不能发给你。
服务端：瞎子都能看出来reques是安全的。你个SB。
浏览器：你才SB
服务端：你SB
......
浏览器：咱天天这样吵也不是事啊。咱们各退一步。
服务端：怎么？
浏览器：这样吧，如果是跨域请求，我先咨询下你，如果你觉得请求安全，我再把真实请求发给你。（Origin, Access-Control-Allow-Origin）
服务器：恩，好吧。不过你每次都先咨询我，对性能会造成影响啊，再说了有些请求不存在安全问题。
浏览器：也是啊。这样吧，对于那些安全的请求，我直接发给你。简单请求的定义你看看
服务器：这个定义确实OK，但也太苛刻了，实际应用中很少遇到啊，这样对性能的提升没有实际解决。
浏览器：但是确保安全是我底线。这个没得让步。
服务器：要不这样，你把预检的结果缓存一段时间，在缓存时间内不用再发送预检请求。
浏览器：好想法，就这样干。不过你得告诉我缓存多久。
服务器：可以啊。（Access-Control-Max-Age）

3.2 CORS流程图

3.3CORS-服务端

要实现CORS机制离不开服务端的配合。为了更好的实现支持CORS服务接口，需要注意几点

1. request可能会请求服务两次(预检，真实请求),在处理预检过程中不要做真实请求的逻辑处理。

参考：

MDN：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

W3C：

https://www.w3.org/TR/cors/