跨域，不得不说的面试题！

什么是跨域？

简单来说就是，网址的 协议，域名或者端口号不同造成的无法访问的情况。(有一个不同即不同！)

大框架

• 1.jsonp跨域
• 2.iframe跨域
  • 1.document.domain+iframe跨域
  • 2.window.name+iframe跨域
  • 3.location.hash+iframe跨域
• 3.postMessage跨域
• 4.跨域资源共享CORS
• 5.WebSocket协议跨域
• 6.webpack代理

jsonp跨域

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信

虽然这种方式非常好用，但是一个最大的缺陷是，只能够实现get请求

iframe跨域

document.domain+iframe跨域

这种跨域的方式最主要的是要求主域名相同。什么是主域名相同呢？ www.nealyang.cn aaa.nealyang.cn ba.ad.nealyang.cn 这三个主域名都是nealyang.cn,而主域名不同的就不能用此方法。

window.name+iframe跨域

window.name属性可设置或者返回存放窗口名称的一个字符串。他的神奇之处在于name值在不同页面或者不同域下加载后依旧存在，没有修改就不会发生变化，并且可以存储非常长的name(2MB)

location.hash+iframe跨域

此跨域方法和上面介绍的比较类似，一样是动态插入一个iframe然后设置其src为服务端地址，而服务端同样输出一端js代码，也同时通过与子窗口之间的通信来完成数据的传输。
将数据加在index页面地址的hash上， index页面监听hash的变化，h5的hashchange方法

postMessage跨域

这是由H5提出来的一个炫酷的API，IE8+，chrome,ff都已经支持实现了这个功能。这个功能也是非常的简单，其中包括接受信息的Message时间，和发送信息的postMessage方法。

otherWindow.postMessage(message,targetOrigin);

CORS跨域

因为是目前主流的跨域解决方案。所以这里多介绍点。

简介

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。IE8+：IE8/9需要使用XDomainRequest对象来支持CORS。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

• 1.普通跨域请求：只需要服务器端设置Access-Control-Allow-Origin
• 2.带cookie跨域请求：前后端都要进行设置
• 【前端设置】根据xhr.withCredentials字段判断是否带有cookie

WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

webpack代理

在webpack.config.js中利用 WebpackDevServer 配置本地代理，详情配置查看devServer

主流

CORS跨域

webpack代理