关于javascript:一文说尽CORS

4次阅读

共计 2173 个字符，预计需要花费 6 分钟才能阅读完成。

CORS 的英文全称是 ”Cross-Origin Resource Sharing”。代表“跨域资源共享”，是一种用于在 Web 浏览器和 Web 服务器之间共享跨域资源的机制。跨域资源是指来自不同域的网页上的资源，如字体，图像，脚本和样式表等。CORS 容许网站服务器提供一组规定，以确定哪些网站能够拜访其资源。

跨域申请是指从一个 Web 页面收回的申请，而且其指标资源与以后页面不同源。
同源是指协定、域名和端口号都雷同，而不仅仅是域名雷同。
如果应用的协定、端口或域名有一个不同，它们就被视为不同源，默认不能够进行跨域拜访。

顾名思义，预检申请用来查看理论申请是否平安可行，确保接下来的理论申请不会引起平安问题。
浏览器会在发送预检申请之后期待响应，只有当服务器容许时，才会发送理论申请。

预检申请的反义词是简略申请，咱们能够看下简略申请的判断规范
若申请满足所有下述条件，则该申请是简略申请：

申请办法应用下列办法之一：

GET
HEAD
POST

容许手动设置的标头字段为：

Accept
Accept-Language
Content-Language
Content-Type（须要留神额定的限度）
Range（只容许简略的范畴标头值如 bytes=256- 或 bytes=127-255）

Content-Type 标头的值仅限于下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

XMLHttpRequest.upload 对象属性上没有注册任何事件监听器
也就是说，没有调用 xhr.upload.addEventListener()，以监听上传申请。

申请中没有应用 ReadableStream 对象。

如果不满足上述任何一个条件，都会触发预检申请

在 CORS 中，预检申请的目标是用于查看跨域申请是否平安、可行。
预检申请是在正式的跨域申请之前发动的一次探测，用于告知服务器，理论发送的跨域申请是否非法。
因而，对于预检申请的解决，须要服务器端进行相应的配置。
预检申请的解决步骤如下：

浏览器会先发送一个 OPTIONS 申请（预检申请），蕴含了理论发送的跨域申请所须要的一些头信息，比方申请办法、申请头等。
服务器收到后，会依据申请头中的信息进行判断，判断跨域申请是否平安可行。
如果跨域申请非法，服务器会返回带有特定 CORS 响应头的响应，告知浏览器理论发送的跨域申请是非法的。
浏览器接管到服务器的响应后，会查看响应头中的 ”CORS” 信息。如果 CORS 响应头非法，则浏览器会发送理论的跨域申请，否则会抛出跨域谬误，申请无奈胜利。

对于非预检申请，CORS 会依照以下规定进行解决：

如果响应头中没有蕴含 ”Access-Control-Allow-Origin”，或者它的值不蕴含以后域名，则浏览器会抛出一个跨域谬误，申请无奈胜利。
如果响应头中蕴含 ”Access-Control-Expose-Headers”，则该响应头中列出的头信息能够被前端 JavaScript 拜访。否则，这些头信息将被浏览器拦挡，无奈被前端 JavaScript 拜访。
须要留神的是，尽管非预检申请不须要发送 OPTIONS 申请，但依然须要服务器返回非法的 CORS 响应头信息。

3. 跨域无关的响应头

上面列出了和跨域无关的响应头：

Access-Control-Allow-Origin：哪些源能够拜访该资源。”*” 示意所有的源都能够拜访该资源。
Access-Control-Allow-Credentials：是否容许发送 Cookie。
Access-Control-Expose-Headers：哪些响应头能够被前端 JavaScript 拜访。默认状况下，不容许拜访
Access-Control-Allow-Methods：哪些 HTTP 申请办法容许跨域拜访。默认状况下，只容许 GET、HEAD、POST 办法。
Access-Control-Allow-Headers：容许的申请头信息。默认状况下，只容许常见的申请头，Accept、Accept-Language、Content-Language、Content-Type。
Access-Control-Max-Age：预检申请的有效期，单位为秒。有效期内，浏览器无需再次发送预检申请。

如果须要在跨域申请中携带 Cookie，服务器须要设置响应头 ”Access-Control-Allow-Credentials” 为 true
同时前端须要设置申请头 ”withCredentials” 为 true，否则无奈携带 Cookie。

在跨域申请中携带 Cookie 时，浏览器会先发送 OPTIONS 预检申请，以查看是否容许跨域申请。
与不携带 Cookie 的状况相比，携带 Cookie 时 ”Access-Control-Allow-Origin” 字段的限度更加严格：