1. 同源策略
如果两个页面的协议，端口和域名都相同，则两个页面具有相同的源（origin）。
The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.
同源策略是一种安全机制，它限制了非同源脚本之间的交互方式。
例如，在使用XMLHttpRequest或 <img> 标签时，会受到同源策略的约束。
这些交互通常分为三类：
（1）通常允许跨域写操作（Cross-origin writes）。例如链接（links），重定向以及表单提交。
（2）通常允许跨域资源嵌入（Cross-origin embedding）。
（3）通常不允许跨域读操作（Cross-origin reads）。但常可以通过内嵌资源来巧妙的进行读取访问。
例如，可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或 availability of an embedded resource。
以下是可能嵌入跨域的资源的一些示例：
（1）<script src="..."></script> 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
（2）<link rel="stylesheet" href="..."> 标签嵌入CSS。
（3）<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...
（4）<video> 和 <audio>嵌入多媒体资源。
（5）<object>, <embed> 和 <applet> 的插件。
（6）@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
（7）<frame> 和 <iframe> 载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。
2. 跨域资源共享
跨域资源共享 Cross-Origin Resource Sharing (CORS)，通过在服务器端设置 Access-Control-Allow-Origin 响应头，
允许浏览器发起跨域请求，例如，跨域 XMLHttpRequest，Fetch 请求。
Access-Control-Allow-Origin 的值为发起跨域请求的那个域名，表示允许这个域名的网页访问当前资源。
服务器端可以通过请求头中的 Origin 字段，来判断某个请求是否跨域请求。
3. onerror信息
服务器端如果没有设置 CORS，
普通的跨域<script>标签，将只向window.onerror反馈尽量少的内容。
window.onerror = (...args) => console.log(args); // ["Script error.", "", 0, 0, null]
给<script>标签添加 crossorigin 属性，
并在服务器端设置 Access-Control-Allow-Origin 响应头，允许脚本被跨域访问，
就可以在window.onerror中获取更详细的日志信息。
[
"Uncaught ReferenceError: a is not defined",
"http://127.0.0.1:8081/index.js",
1,
1,
ReferenceError: a is not defined
at http://127.0.0.1:8081/index.js:1:1]
注：
普通<script>标签是可以加载跨域脚本的，
但如果给跨域<script>标签添加了crossorigin属性，
（且服务器端没有设置Access-Control-Allow-Origin 响应头），
就会出现以下错误，
Access to Script at 'http://127.0.0.1:8081/index.js' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8080' is therefore not allowed access.
示例代码：
（1）在./test-cors1/ 文件夹下启动静态网站，监听8080端口
<!-- ./test-cors1/index.html -->
<script crossorigin src="http://127.0.0.1:8081/index.js"></script>
（2）在./test-cors2/ 文件夹下启动静态网站，监听8081端口
// ./test-cors2/index.js
a;
4. crossorigin属性
crossorigin 属性不止可以用于<script>标签，还可以用与<img>，<video>等标签，
用于配置 CORS 的请求数据，见下表，
| Keyword | State | Request Mode | Credentials Mode |
|---|---|---|---|
| the attribute is omitted | No CORS | "no-cors" | "omit" |
| "" | Anonymous | "cors" | "same-origin" |
| "anonymous" | Anonymous | "cors" | "same-origin" |
| "use-credentials" | Use Credentials | "cors" | "include" |
不同的crossorigin值，指定了不同的Request Mode 和 Credentials Mode。
其中，术语use credentials指的是，cookies，http authentication 和客户端ssl证书。
The term user credentials for the purposes of this specification means cookies, HTTP authentication, and client-side SSL certificates that would be sent based on the user agent's previous interactions with the origin. Specifically it does not refer to proxy authentication or the Origin header.
参考
MDN: Same-origin policy
MDN: Cross-Origin Resource Sharing (CORS)
MDN: script - crossorigin
MDN: The crossOrigin attribute
W3C HTML5: CORS settings attributes
W3C: CORS
Wikipedia: Cross-origin resource sharing
网友评论