本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
先来看看跨域请求会发生什么，如上图所示，我在百度首页发起一个获取掘金文章列表数据的接口，请求失败了，控制台报了错误，主要留意‘has been blocked by CORS policy’这里。是什么意思呢，意思是你的请求被拦截了，因为CORS policy。那什么是CORS policy呢，就是说你的请求跨站了。换句话说，你发起请求的页面站点，和目标的不是同一个站点，只有同一个站点的请求才可能会成功。
为什么会这样呢，不妨试想下，如果不同的站点可以通过XMLHttpRequest互相请求资源，这会变得怎么样呢，我能想到的主要有几方面的影响：
-
当前站点可通过JavaScript脚本对对方站点的DOM对象进行读写操作；
-
当前站点可读取对方站点的Cookie、IndexDB、localStorage等敏感数据；
-
当前站点在知道对方站点api地址的情况下，可获取对方站点的接口数据。 要是像上面所描述的那样的话，这太可怕了。那些黑客或恶意的站点，能做的坏事可就多了，比如可以把用户信息上传到自己的服务器，然后伪造一些请求，比如转账、删除掘金的文章数据等等。
所以说，网络世界里不能没有安全保障，我们需要安全策略来保障数据安全，于是就有了浏览器的同源策略！ 那么什么是同源策略呢？
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 同源的定义： 如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。
下表给出了与 URL https://juejin.cn/post/6994417198164869133 的源进行对比的示例:
| URL | 是否同源 | 原因 |
|---|---|---|
https://juejin.cn/test | 同源 | 只有路径不一样 |
http://juejin.cn/test | 不同源 | 协议不一样 |
https://juejin.cn:80/post/6994417198164869133 | 不同源 | 端口不一样，https默认端口443 |
http://test.juejin.cn/test | 不同源 | 主机（域名）不一样 |
为了避免上面所说的情况发生，浏览器要求，只有符合同源策略的站点才能使用XMLHttpRequest发起请求，这样就保证了数据的安全。 但这是绝对的吗，难道没有其他方法在非同源策略下也能跨站请求资源吗？答案是有的！那就是CORS!
CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
这是一种白名单的配置方式，主要通过配置 CORS 头的Access-Control-Allow-Origin来实现，它的意思是指示请求的资源能共享给哪些域。 语法如下
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
- 其中
*号表示通配符，允许所有域都具有访问资源的权限。 <origin>指定一个可以访问资源的URI。其他的不多说了，具体配置可参考MDN这里的文档说明。 总的来说，XMLHttpRequest不允许跨域请求资源，是因为浏览器的同源策略，用于保障数据的安全；但可通过其他方式来实现跨站请求，如CORS。
