如何解决跨域问题

解决跨域的⽅法我们可以根据我们想要实现的⽬的来划分。

⾸先我们如果只是想要实现主域名下的不同⼦域名的跨域操作，我们可以使⽤设置 document.domain 来解决。

（1）将 document.domain 设置为主域名，来实现相同⼦域名的跨域操作，这个时候主域名下的 cookie 就能够被⼦域名所访问。同时如果⽂档中含有主域名相同，⼦域名不同的iframe 的话，我们也可以对这个 iframe 进⾏操作。

如果是想要解决不同跨域窗⼝间的通信问题，⽐如说⼀个页⾯想要和页⾯的中的不同源的 iframe 进⾏通信的问题，我们可以对这个 iframe 进⾏操作。

如果是想要解决不同跨域窗⼝间的通信问题，⽐如说⼀个页⾯想要和页⾯的中的不同源的 iframe 进⾏通信的问题，我们可以使⽤ location.hash 或者 window.name 或者postMessage 来解决。

（2）使⽤ location.hash 的⽅法，我们可以在主页⾯动态的修改 iframe 窗⼝的 hash 值，然后在 iframe 窗⼝⾥实现监听函数来实现这样⼀个单向的通信。因为在 iframe 是没有办法访问到不同源的⽗级窗⼝的，所以我们不能直接修改⽗级窗⼝的 hash 值来实现通信，我们可以 window.parent.parent 来修改最顶级页⾯的 src，以此来实现双向通信。

（3）使⽤ window.name 的⽅法，主要是基于同⼀个窗⼝中设置了 window.name 后不同源的页⾯也可以访问，所以不同源的⼦页⾯可以⾸先在 window.name 中写⼊数据，然后跳转到⼀个和⽗级同源的页⾯。这个时候级页⾯就可以访问同源的⼦页⾯中 window.name 中的数据了，这种⽅式的好处是可以传输的数据量⼤。

（4）使⽤ postMessage 来解决的⽅法，这是⼀个 h5 中新增的⼀个 api。通过它我们可以实现多窗⼝间的信息传递，通过获取到指定窗⼝的引⽤，然后调⽤ postMessage 来发送信息，在窗⼝中我们通过对 message 信息的监听来接收信息，以此来实现不同源间的信息交换。
如果是像解决 ajax ⽆法提交跨域请求的问题，我们可以使⽤ jsonp、cors、websocket 协议、服务器代理来解决问题。
（5）使⽤ jsonp 来实现跨域请求，它的主要原理是通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引⼊没有跨域的访问限制。通过在请求的 url 后指定⼀

个回调函数，然后服务器在返回数据的时候，构建⼀个 json 数据的包装，这个包装就是回调函数，然后返回给前端，前端接收到数据后，因为请求的是脚本⽂件，所以会直接执⾏，这样我们先前定义好的回调函数就可以被调⽤，从⽽实现了跨域请求的处理。这种⽅式只能⽤于 get 请求。

（6）使⽤ CORS 的⽅式，CORS 是⼀个 W3C 标准，全称是"跨域资源共享"。CORS 需要浏览器和服务器同时⽀持。⽬前，所有浏览器都⽀持该功能，因此我们只需要在服务器端配置就⾏。浏览器将 CORS 请求分成两类：简单请求和⾮简单请求。对于简单请求，浏览器直接发出 CORS 请求。具体来说，就是会在头信息之中，增加⼀个 Origin 字段。Origin 字段⽤来说明本次请求来⾃哪个源。服务器根据这个值，决定是否同意这次请求。对于如果 Origin 指定的源，不在许可范围内，服务器会返回⼀个正常的 HTTP 回应。浏览器发现，这个回应的头信息没有包含 Access-Control-Allow-Origin 字段，就知道出错了，从⽽抛出⼀个错误，ajax 不会收到响应信息。如果成功的话会包含⼀些以Access-Control- 开头的字段。

⾮简单请求，浏览器会先发出⼀次预检请求，来判断该域名是否在服务器的⽩名单中，如果收到肯定回复后才会发起请求。

（7）使⽤ websocket 协议，这个协议没有同源限制。

（8）使⽤服务器来代理跨域的访问请求，就是有跨域的请求操作时发送请求给后端，让后端代为请求，然后最后将获取的结果发返回。