js常见跨域解决方案

参考：前端常见跨域解决方案（全）

跨域，什么是“域”？

这里就要先说说同源策略了。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

跨域常见解决方案

1.jsonp

原理：ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

jsonp的实现可以查看下面这个链接

菜鸟教程jsonp

缺点：只能发送get请求

2.postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

a.） 页面和其打开的新窗口的数据传递

b.） 多窗口之间消息传递

c.） 页面与嵌套的iframe消息传递

d.） 上面三个场景的跨域数据传递

html5 postMessage解决跨域、跨窗口消息传递

3.跨域资源共享（CORS）

a.） 普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

b.） 带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

c.） 目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

CORS简介

4.其他跨域方式

1、 document.domain + iframe跨域

2、 location.hash + iframe

3、使用websocket（Websocket原理及使用场景[转载]）

4、使用nginx反向代理（nginx反向代理-解决前端跨域问题）