完美解决浏览器跨域的几种方法(汇总)
1、什么是跨域问题
在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时,以及hybridapp中请求数据,浏览器会提示一下错误:
XMLHttpRequestcannotloadhttp://你请求的域名.No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://当前页的域名'isthereforenotallowedaccess.
2、为什么会出现跨域问题
因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性。
同源策略:不同的域名,不同端口,不同的协议不允许共享资源的,保障浏览器安全。
同源策略时针对浏览器设置的门槛。如果绕过浏览就能实现跨域,所以说早期的跨域都是打着安全路数的擦边球,都可以认为是hack处理。
3、现在总结一下解决跨域的几种方法
jsonp跨域方法
我们提供一个script标签.请求页面中的数据,同时传入一个回调函数的名字.服务器端得到名字后,拼接函数执行格式的字符串.发送回浏览器.script在下载代码以后并执行,执行的就是这个函数调用形式的字符串,因此就将本地函数调用了.同时拿到了从服务器端得到的数据。
window.name
window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给window.name,iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。这个方式非常适合单向的数据请求,而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。
document.domain
通过修改document的domain属性,我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域,比如www.a.com和sub.a.com是不同的域,这时,我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com,浏览器就会认为它们处于同一个域下,那么我们就可以互相调用对方的method来通信了。
window.postMessage
window.postMessage是HTML5定义的一个很新的方法,这个方法可以很方便地跨window通信。由于它是一个很新的方法,所以在很旧和比较旧的浏览器中都无法使用。
借助于服务器代码来跨域(正向代理、反向代理)
正向代理:我借助与我的服务器,像数据服务器发送数据,我的服务器只需要向数据服务器发送get请求即可
反向代理:与正向代理类似,但是不借助于脚本,而是直接使用服务器映射url.
例如:我们的url是http://studyit.com
数据服务器的url是http://api.botue.com/login
在apache配置一个url的代理映射
理论上使用url:http://studyit.com/api是在网站根目录下找api文件夹
但是现在apache提供一个映射的功能,将/api映射到http://api.botue.com
有了这个映射,那么访问http://api.botue.com/login就可以利用/api/login来访问了.
反向代理的好处:
不仅实现了跨域(服务器帮我们实现的),而且访问数据的时候就好像在访问本地服务器一样.如此,诸如cookie等数据就可以直接获得了.
怎么使用反向代理(不同的服务器的使用方法不一样)
1)找到httpd.conf配置文件,找到里面的porxy开头的两个模块加载项.去掉其注释.
LoadModuleproxy_modulemodules/mod_proxy.so
LoadModuleproxy_http_modulemodules/mod_proxy_http.so
2)找到虚拟主机的配置文件.需要谁来做反向代理就修改谁的配置文件,在虚拟主机的设置中(就是那一对尖括号中)添加两个选项
ProxyRequestsOff
ProxyPass/abchttp://test2.com
3)重启服务器
CORS跨域
CORS是在es5之后提出的跨域方案.只需要在服务器配置一个跨域响应头接口
与jsonp相比的优点:
1、JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
代码如下:
客户端:
Document 请求