完美解决浏览器跨域的几种方法(汇总)

浏览器跨域解决方法汇总 浏览器跨域问题是指在页面中使用js访问其他网站的数据时出现的错误，例如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时，以及hybrid app中请求数据，浏览器会提示以下错误：XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access. 浏览器跨域问题的出现是因为浏览器收到同源策略的限制，当前域名的js只能读取同域下的窗口属性。同源策略：不同域名、不同端口、不同协议不允许共享资源的，保障浏览器安全。同源策略是针对浏览器设置的门槛。如果绕过浏览器就能实现跨域，所以说早期的跨域都是打着安全路数的擦边球，都可以认为是hack处理。 解决浏览器跨域问题有多种方法： 1.jsonp跨域方法：jsonp跨域方法提供一个script标签，请求页面中的数据，同时传入一个回调函数的名字。服务器端得到名字后，拼接函数执行格式的字符串。发送回浏览器。script在下载代码以后并执行，执行的就是这个函数调用形式的字符串，因此就将本地函数调用了。同时拿到了从服务器端得到的数据。 2.window.name方法：window.name对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。 3.document.domain方法：通过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如www.a.com和sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的method来通信了。 4.window.postMessage方法：window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。 5.借助于服务器代码来跨域（正向代理、反向代理）：正向代理：我借助于我的服务器，像数据服务器发送数据，我服务器只需要向数据服务器发送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配置文件，找到里面的proxy开头的两个模块加载项。去掉其注释。LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so 2）找到虚拟主机的配置文件，添加反向代理的配置。 解决浏览器跨域问题有多种方法，可以根据实际情况选择合适的方法来解决跨域问题。