当前位置: 首页 > Web前端 > HTML5

Cross-domain-CORS

时间:2023-04-05 22:16:31 HTML5

1.概念:Cross-OriginResourceSharing:(跨域资源共享)AccessControl:访问控制,后面会看到前缀为Access-Control的header字段。2、介绍背景:JS中的xhr请求(XMLHttpRequest)受同源策略限制。但这也导致一些合理的请求被限制。W3C提出了新的标准CORS来解决这个问题。CORS机制允许服务器控制是否允许跨域请求(当然,它也负责保证安全)。教程参考了MDN(即MDN的引用),下面做一些总结说明。3.CORS原理3.1浏览器与服务器的协商服务器:嗨,我说你管的太多了!我认为请求A是安全的,你为什么不把它发给我呢?浏览器:我怎么知道请求A是安全的。出于安全原因,我无法将其发送给您。服务器:盲人也能看出请求是安全的。你某人。浏览器:你是SB服务器:你是SB...浏览器:我们天天这么吵不是问题。让我们每个人都退后一步。服务器:什么?浏览器:嗯,如果是跨域请求,我会先咨询你,如果你认为这个请求是安全的,我再把真正的请求发给你。(Origin,Access-Control-Allow-Origin)服务器:嗯,好的。但是如果每次都先咨询我,会影响性能。此外,一些请求没有安全问题。浏览器:没错。好吧,对于那些安全的请求,我直接将它们发送给你。简单请求的定义,看服务端:这个定义确实可以,但是太苛刻了,实际应用中很少遇到,所以对于性能的提升没有切实可行的解决方案。浏览器:但确保安全是我的底线。对此没有妥协。服务器:否则,你将预检结果缓存一段时间,在缓存时间内不需要发送预检请求。浏览器:好主意,让我们开始吧。但是你必须告诉我要缓存多长时间。服务器:是的。(Access-Control-Max-Age)3.2CORS流程图3.3CORS-CORS机制离不开服务器的配合。为了更好的支持CORS服务接口,需要注意几点请求可能会请求服务两次(pre-check,realrequest),pre-check时不要对realrequest进行逻辑处理检查过程。参考:MDN:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORSW3C:https://www.w3.org/TR/cors/