参考:前端常见跨域解决方案(全)
跨域,什么是“域”?
这里就要先说说同源策略了。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
同源策略限制以下几种行为:
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
跨域常见解决方案
1.jsonp
原理:ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
jsonp的实现可以查看下面这个链接
缺点:只能发送get请求
2.postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
a.) 页面和其打开的新窗口的数据传递
b.) 多窗口之间消息传递
c.) 页面与嵌套的iframe消息传递
d.) 上面三个场景的跨域数据传递
3.跨域资源共享(CORS)
a.) 普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置。
b.) 带cookie请求:前后端都需要设置字段,另外需注意:所带cookie为跨域请求接口所在域的cookie,而非当前页。
c.) 目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。
4.其他跨域方式
1、 document.domain + iframe跨域
2、 location.hash + iframe
3、使用websocket(Websocket原理及使用场景[转载])
4、使用nginx反向代理(nginx反向代理-解决前端跨域问题)