【跨域】 关于跨域的一些知识整合

· 同源

协议、域名(IP)、端口相同即为同源

· 跨域

当浏览器从一个网站去访问另外一个非同源URL（与当前网站的URL的协议、域名、端口，任意一个不同）时，这样的动作，叫做跨域

· 浏览器的同源策略

同源策略（Same Origin Policy，SOP）是一种约定，它是浏览器最核心也最基本的安全功能，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。简单点说，就是浏览器是不允许发起跨域请求的。

· 同源策略解决的问题

1、防止恶意网站获取cookie去访问正规网站，发起CSRF（Cross Site Request Forgery, 跨站域请求伪造）。也就是说，在同源策略下，cookie是无法跨域的。
2、防止恶意网站获取正规网站的DOM，然后获取用户输入的敏感信息。
例如：

<iframe name="faker" src="www.abcd.com"></iframe>

// 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的 Dom

const iframe = window.frames['faker']

const node = iframe.document.getElementById('你输入账号密码的Input标签id')

console.log(`${node}，输入的账号密码信息`)

· 同源策略带来的问题

无法跨域获取资源

· 解决跨域问题

1、使用可跨域标签
（1）<img>
（2）<script>
（3）<link>

2、使用JSONP
对<script>标签请求的放行将请求发出去，然后让服务器返回经过callback函数包装的JS代码，最后实现数据的加载。
【注意】：
（1）只限GET请求，而且数据的返回格式固定
（2）AJAX里封装了JSONP

3、CORS，"跨域资源共享"（Cross-origin resource sharing），属于W3C标准。
（CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10）
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。
浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
【具体详见阮一峰的博文】：https://www.ruanyifeng.com/blog/2016/04/cors.html

· 代理解决跨域问题

使用nginx的反向代理，将同源的请求，转发到目标资源

· 参考博文：

https://zhuanlan.zhihu.com/p/272141912
https://www.leixue.com/ask/what-is-cross-domain
https://cloud.tencent.com/developer/article/1408333
https://www.ruanyifeng.com/blog/2016/04/cors.html