前言
做过 web 开发的，应该都遇到过跨域问题。
跨域
所谓的跨域问题，简单来说就是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的。
同源策略(Same origin policy)，它是由 Netscape 公司提出的一个著名的安全策略，1995 年引入浏览器。它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响——它能帮助阻隔恶意文档，减少可能被攻击的媒介。
同源策略
如果两个 URL 的协议、端口(如果有指定的话)和域名都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。
也就是说，当一个页面请求 URL 的协议、域名、端口三者之间的任何一者与当前页面 URL 不同，即为跨域。
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：
| 请求URL | 结果 | 原因 |
|---|---|---|
| http://store.company.com/dir2/other.html | 同源 | 只是路径不同 |
| http://store.company.com/dir/inner/another.html | 同源 | 只是路径不同 |
| https://store.company.com/secure.html | 失败 | 协议不同 |
| http://store.company.com:81/dir/etc.html | 失败 | 端口不同 (http:// 默认端口是80) |
| http://news.company.com/dir/other.html | 失败 | 主机不同 |
即便两个不同的域名指向同一个 ip 地址，也非同源。所以，
localhost和127.0.0.1虽然都指向本机，但也属于跨域。
跨域导致的问题
- 不能读取非同源网页中的 Cookie、LocalStorage 和 IndexDB 等数据；
- 不能接触非同源网页的 DOM 结构 和 JS 对象；
- 不能向非同源地址发送 AJAX 请求。
浏览器会报错：
XXX has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.解决方案
HTML 有一些特殊标签例如：\<img\>、
