html浏览器兼容问题(html5浏览器兼容性解决方法)

  一、什么是跨域问题

  在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时,以及hybrid app中请求数据,浏览器会提示一下错误:

  cannot load https://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://当前页的域名' is therefore not allowed access.

  二、为什么会出现跨域问题

  因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性。

  同源策略:不同的域名,不同端口,不同的协议不允许共享资源的,保障浏览器安全。

  同源策略时针对浏览器设置的门槛。如果绕过浏览就能实现跨域,所以说早期的跨域都是打着安全路数的擦边球,都可以认为是 hack 处理。

  三、现在总结一下解决跨域的几种方法

  1、jsonp 跨域方法

  我们提供一个 标签. 请求页面中的数据, 同时传入一个回调函数的名字。服务器端得到名字后, 拼接函数执行格式的字符串。发送回浏览器。 在下载代码以后并执行, 执行的就是这个函数调用形式的字符串, 因此就将本地函数调用了,同时拿到了从服务器端得到的数据。

  2、window.name

  window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变。那么我们可以在页面A中用iframe加载其他域的页面B,而页面B中用Java把需要传递的数据赋值给 window.name,iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出window.name的值了。这个方式非常适合单向的数据请求,而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本。

  3、document.domain

  通过修改document的domain属性,我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域,比如 www.a.com和sub.a.com是不同的域,这时,我们无法在www.a.com下的页面中调用sub.a.com中定义的Java 方法。但是当我们把它们document的domain属性都修改为a.com,浏览器就会认为它们处于同一个域下,那么我们就可以互相调用对方的 method来通信了。

html浏览器兼容问题(html5浏览器兼容性解决方法),html浏览器兼容问题(html5浏览器兼容性解决方法),html浏览器兼容问题,信息,微信,浏览器,第1张

  4、window.postMessage

  window.postMessage是HTML5定义的一个很新的方法,这个方法可以很方便地跨window通信。由于它是一个很新的方法,所以在很旧和比较旧的浏览器中都无法使用。

  5、借助于服务器代码来跨域(正向代理、反向代理)

  正向代理: 我借助与我的服务器, 像数据服务器发送数据, 我的服务器只需要向数据服务器发送get请求即可。

  反向代理: 与正向代理类似, 但是不借助于脚本, 而是直接使用服务器映射 url。例如: 我们的 url 是 https://studyit.com数据服务器的 url 是 https://api.botue.com/login在 apache 配置一个 url 的代理映射理论上使用 url: https://studyit.com/api 是在网站根目录下找 api 文件夹。但是现在 apache 提供一个映射的功能, 将 /api 映射到 https://api.botue.com有了这个映射, 那么访问 https://api.botue.com/login 就可以利用 /api/login来访问了.

  反向代理的好处:

  不仅实现了跨域(服务器帮我们实现的),而且访问数据的时候就好像在访问本地服务器一样。如此,诸如 cookie 等数据就可以直接获得了。

  怎么使用反向代理( 不同的服务器的使用方法不一样 )

  1)找到 httpd.conf 配置文件, 找到里面的 porxy 开头的两个模块加载项,去掉其注释。

  LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.so

  2)找到虚拟主机的配置文件. 需要谁来做反向代理就修改谁的配置文件,在虚拟主机的设置中( 就是那一对尖括号中 )添加两个选项。ProxyRequests OffProxyPass /abc https://test2.com

  3)重启服务器

  6、CORS 跨域

  CORS是在 es5 之后提出的跨域方案. 只需要在服务器配置一个跨域响应头接口。与jsonp相比的优点:

  1、JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 2、使用CORS,开发者可以使用普通的发起请求和获得数据,比起JSONP有更好的错误处理。 3、JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。

  代码如下:

  客户端:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="btn">请求</button> < src="./jquery-3.2.0.js"></> <> $( '#btn' ).click(function () { $.ajax( { url: 'https://test2.com/03-index.php', success: function ( info ) { console.log( info ); } }); }); </> </body> </html>

  服务器端:

<?php // header( 'Access-Control-Allow-Origin: *' ); // 允许任意的网站跨域 header( 'Access-Control-Allow-Origin: https://test1.com' );//允许指定网站 echo 'cors 跨域'; ?>

  尚学堂专注IT教育10年,与各大企业、公司合作,共同为社会输送了大批IT人才,尚学堂更有马士兵老师亲自代课,保证教学质量。

  如果对编程感兴趣,对进入IT行业感兴趣,加微信(858568103)了解更多编程信息

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html浏览器兼容问题(html5浏览器兼容性解决方法)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论