持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 9 天，点击查看活动详情
同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
跨域其实就是同源策略这种限制引起的。
那么怎么样才算是同源呢？
同源是指协议 + 域名（主域名、子域名）+ 端口三者相同，即便两个不同的域名指向同一个 IP 地址，也非同源。
下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例:
浏览器中的大部分内容都是受同源策略限制的，但是以下三个标签可以不受限制：
- 加载图片的
<img src=xxx> - 引用 CSS 样式的
<link href=xxx> - 引用 JS 脚本的
<script src=xxx>
这就有了第一种解决跨域限制的方法：JSONP。它便是利用了不受同源策略限制的机制，可以在不同源的情况下请求资源。（这里不过多介绍，后面有资源链接自己看）
但要注意，普通的脚本和加上 type="module" 的脚本对 CORS（跨源资源共享）的处理方式不同。
<!-- 不是 CORS 的请求 -->
<script src="https://example.com/script.js"></script>
<!-- CORS 请求 -->
<script type="module" src="https://example.com/script.js"></script>
如果您在模块上下文中请求 JavaScript 文件，则响应需要定义一个 Access-Control-Allow-Origin 头，否则它将受到浏览器同源策略的影响。
解决跨域的方案有很多种，详细内容可以阅读阮一峰老师的浏览器同源政策及其规避方法。
更多资料
本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。
