知识点整理之---跨域是什么，为什么会有跨域？跨域的解决方法是什么？常用的是什么？原理是什么？

跨域是什么，为什么会有跨域？跨域的解决方法是什么？常用的是什么？原理是什么？

面对这一连串问题，是不是很懵？
让我们来抽丝剥茧一点一点解决它。

什么是跨域？

跨域是指从一个域名去请求另一个域名的资源，严格来说，只要域名，协议，端口任何一个不同，就视为跨域。

为什么会出现跨域？

为了网络安全起见，浏览器设置了一个同源策略，规定只有域名，端口，协议全部相同，就叫做同源。当页面在执行一个脚本时，会检查访问的资源是否同源，如果不是，就会报错。可是在实际开发中，经常会有跨域加载资源的需求，避免不了跨域请求，所以就出现了跨域。

什么是同源策略及限制？

同源策略是指从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用来隔离潜在恶意文件的的关键的安全机制。不同源之间的交互是被浏览器限制的，为了安全起见。

同源策略限制的具体表现是什么？

（1）coikie、LocalStorage和Index DB 无法读取
（2）Dom 无法获得
（3）AJAX请求不能发送

JS中自带跨域技能的标签是什么 ？

JS中有两个神奇的标签，从出生起就自带跨域技能，就是<img/>和<script><script/>这两个标签。
说起能跨域的标签，就要提一提常用的跨域方法。

常用的跨域方法是什么？

1、JSONP -- 原理就是利用了script标签，在标签外套了一层壳，利用标签特性达到跨域加载资源的效果。
JSONP由两部分组成，回调函数和数据
优点：
（1）兼容性好，在多古老的浏览器都能运行。
（2）能直接访问响应文本，支持在浏览器与服务器之间双向通信。
缺点：
（1）只支持GET请求，不支持POST请求；
（2）不够安全。因为JSONP是从其他域中加载代码执行，如果其他域不安全，可能会在响应中带有恶意代码。
（3）不容易确认请求是否失败。
2、CORS -- 跨站资源共享，它是跨域的官方解决方案，升级版的JSONP。原理是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。请求和响应都不包含cookie信息。
CORS需要浏览器和后院同时支持，浏览器会自动进行CORS通信，实现CORS通信的关键是后端，只要后端实现了CORS，就实现了跨域，服务端设置Access-Control-Allow-Origin 就可以开启CORS，该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
3、webSockets -- 不受同源策略影响。原理是因为它不使用HTTP协议，而使用一种自定义的协议，专门为快速传输小数据设计。
4、Nginx -- 代理跨域。反向代理跨域。

作者：楠楠_c811
链接：https://www.jianshu.com/p/827b041be446
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。