同源策略

什么是同源策略

浏览器为了安全，制定了一个规则，即页面的源和请求目标的源应该保持一致，如果不一致，就产生了跨域，源=协议+主机+端口。

浏览器对跨域行为作出的不同限制，比如阻止访问资源、能访问资源但无法读取源码等，就统称为同源策略。

什么是跨域资源共享(CORS)

全称Cross-Origin Resource Sharing，即跨域资源共享。

对于跨域请求，会有CORS校验，但不是所有的跨域资源请求都会受到CORS校验。

有些请求会受到CORS校验，比如axios/fetch接口请求、import()动态导入远程模块、type="module"加载模块脚本。

有些请求不会受CORS校验，比如window.open()、location.href、<a>、<script>、<link>、<img>、<iframe>访问跨域资源，它们只受同源策略基础限制。

受到CORS校验的请求，获取服务器的允许后（通过一系列响应头告诉浏览器允许跨域访问资源），可读取该脚本完整源码。

不受CORS校验的无法拿到跨域资源源码，但允许加载、执行、渲染这些资源（如果需要拿到源码，可以强行触发请求的CORS校验，比如<link>、<img>、<script>标签的crossorigin属性就是用来开启CORS校验的）。

总结

同源策略导致了跨域问题，导致有些请求无法读取到资源，有些请求可以读取资源但访问不了源码，这都是因为有CORS校验，后端返回响应头的方式可以让浏览器通过校验获得资源，这是一种解决跨域的方式。

还有开发服务器代理的方式和JSONP的方式也可以解决跨域读取不到资源的问题。