Access to XMLHttpRequest at ‘xx’ from origin ‘xx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
前端的这个报错相信很多人都有遇到过，也知道这是跨域请求的问题。
那么究竟什么是跨域，跨域又是怎么产生的，以及跨域请求的问题需要怎么解决。我们一起来了解一下这些知识。
什么是跨域
域： 域既是 Windows 网络操作系统的逻辑组织单元，也是Internet的逻辑组织单元，它是安全边界。
只有域的所有者才能访问管理域内部的资源，若其他的域要访问或者管理，则需要该域赋予其他域相关权限。
从小角度来讲，在php中的变量作用域，就可以体现出安全边界的概念。在以下例子中，调用test函数并不会输出任何。
因为函数内调用的是局部作用域的变量，而在局部作用域内并没有声明 $a 变量。
除非我们使用global $a;从全局作用域引用该变量。
在PHP脚本中的变量作用域不算复杂，而将一个网站看做一个域，当它要引用其他域的资源时，就需要目标域对原始域进行授权信任。
这种从其他域获取资源的操作就叫做 跨域。
浏览器的同源策略
同源策略是Web的一种安全约定，浏览器的同源策略只是对其的一种实现。
浏览器同源策略将认为任何站点装载的内容都是不安全的。所以会对跨域的操作或者请求进行限制，从而让用户安全的上网。
同源 指的是:域名、协议、端口相同。
若有其中一个不同，浏览器将会认为非同源，也就是跨域。
浏览器的同源策略主要有
两种
DOM 同源策略 ： 禁止对不同源页面的 Dom 元素进行操作，主要是在 iframe 标签加载跨域页面出现。
XMLHttpRequest 同源策略 ： 禁止使用 XHR 对象对不同源地址发起请求。
存储在浏览器中的数据，如localStroage、Cooke和IndexedDB不能通过脚本跨域访问
Dom 同源策略
如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问操作。
那么将会出现这种攻击操作：我们 iframe 包含某个网站的登录页，并且监听目标网站的登录按钮，当用户触发按钮的时候，我们拿到目标网站 input 的dom元素，并且取值，保存到自己的服务器上。
但是因为有 Dom 同源策略的存在，禁止操作不同源页面的dom元素，甚至我们还可以将自己的网站设置禁止在非同源网站上 iframe，我们来看看下面的例子
Siam - Dom同源策略