跨域-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流程图

跨域-CORS_第1张图片

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/

你可能感兴趣的:(html5,javascript)