CORS

原文
Cross-Origin Resource Sharing (CORS)
让user agent 获取不同源的资源，通过附加在http头来实现的机制。

cross-origin请求如下

1
2
<!-- page in http://domain-a.com -->
<img src="http://domain-b.com/image.jpg">

现如今很多网页从CDN加载css、imgs、script

由于安全原因，浏览器限制js脚本里面的cross-origin的http请求，例如XMLHttpRequest和Fetch API遵循同源策略，这意味着网页使用这些APIS只能访问同源的资源，除非使用CORS的header

哪些请求要使用CORS

  • 使用跨域方式调用XMLHttpRequest或者Fetch APIS

  • Web Fonts（对于@font-face使用跨域资源de ）

    1
    2
    3
    4
    5
    @font-face {
     font-family: "Open Sans";
     src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
            url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }

  • WebGL textures

  • Canvas 使用drawImage来draw Images/Video frames
  • stylesheets(for CSSOM access)
  • scripts(for unmuted exceptions)

简单请求

简单请求不会触发preflighted request
简要介绍下preflight request