各位老铁们好，相信很多人对谷歌浏览器解决cors问题都不是特别的了解，因此呢，今天就来为大家分享下关于谷歌浏览器解决cors问题以及谷歌浏览器this site cant be reach的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

本文目录

1. 浏览器跨域及其解决方案
2. 谷歌浏览器调用第三方接口当前显示的是预配标头,无法加载数据,
3. 如何解决IE浏览器跨域问题
4. 前端面试题之解决浏览器兼容性的方案

一、浏览器跨域及其解决方案

1、什么是跨域跨域的表现解决跨域问题-浏览器设置(不推荐)-前端的非正统解决方式- CORS(跨域资源共享)-配置nginx反向代理

2、跨域出于浏览器的同源策略限制，同源是指协议、域名、端口都一样，同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

3、调用页面时接口数据不返回，控制台中会有红色的报错信息中有类似于 CORS policy关键字。另外，在最新谷歌浏览器中，会有提出类似于loaded over HTTPS此种关键字，均可以考虑为跨域导致。

4、 [图片上传失败...(image-26deed-1651135597111)]

5、 tips:有的时候后台小伙伴使用postman测试好的接口，前端不可以使用，原因就是postman不是浏览器，不会有同源限制，同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug，同源限制也不是一个不好的规则。

6、虽然跨域不是一个不好的事情，但是对于前后端分离的web开发来说确实需要解决的，大致的解决方案可分为：

7、直接从根源解决问题，让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

8、官方正统解决方案， CORS规范允许服务器向浏览器返回一些HTTP Headers，浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合，浏览器需要什么，接口服务给什么。

9、 nginx是一个高性能的HTTP和反向代理web服务器，nginx用来解决跨域问题的原理与前端非正统解决方式的 proxy的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。

二、谷歌浏览器调用第三方接口当前显示的是预配标头,无法加载数据,

1、根据查询CSDN社区网站得知，谷歌浏览器调用第三方接口当前显示的是预配标头,无法加载数据，可能有以下几种原因和解决方法：

2、原因一：跨域请求问题。如果你的网站和第三方接口不在同一个域名下，就需要使用CORS（跨域资源共享）技术来实现跨域请求。在这种情况下，浏览器会先发送一个OPTIONS请求，来确认服务器是否支持这个请求，如果服务器返回允许，则会发送实际的请求。如果服务器没有正确配置CORS，或者返回了不允许的响应，就会导致请求失败。

3、解决方法一：检查服务器端是否正确配置了CORS，或者联系第三方接口的提供者，让他们支持CORS。具体的配置方法可以参考CORS的相关资料。

4、原因二：网络连接问题。如果你的网络连接不稳定或者被阻断，就可能导致请求无法正常发送或接收。这种情况下，浏览器可能会显示“无法加载数据”或者“网络错误”的提示。

5、解决方法二：检查你的网络连接是否正常，或者尝试更换网络环境。你也可以使用一些网络诊断工具来检测和修复网络问题。

6、原因三：浏览器设置问题。如果你的浏览器设置了一些不合理的参数或者安装了一些过期或冲突的扩展程序，就可能影响请求的正常发送或接收。这种情况下，浏览器可能会显示“预配标头”或者“无法解析响应”的提示。

7、解决方法三：检查你的浏览器设置是否正确，或者禁用或卸载一些不必要的扩展程序。你也可以尝试清除浏览器缓存或者重新安装浏览器。

三、如何解决IE浏览器跨域问题

1、浏览器的不同，跨域解决方式也不同。前一篇讲解了谷歌浏览器的跨域问题，本篇将讲解IE浏览器的跨域问题。IE设置方法与谷歌相比稍微复杂一点。

2、打开IE浏览器，在工具菜单下选择Internet选项，打开Internet选项卡

3、切换到安全选项卡下，点击可信站点，然后单击站点按钮

4、可信站点窗口输入网址到可信站点的区域，点击添加按钮，网址则会添加到网站列表下，最后关闭可信站点窗口

5、还是在安全选项卡下的可信站点，点击自定义级别

6、打开受信任的站点区域窗口，找到跨域浏览窗口和框架选择启用

7、在当前窗口中继续往下翻，通过域访问数据源也选择启用，点击确定关闭受信任的站点区域窗口

8、在Internet窗口也点击确定按钮，同时关闭浏览器

9、在请求的js脚本中添加是否允许跨域访问的权限，jQuery.support.cors默认值为true，则代表允许；反之，不允许。设置完成，重新打开浏览器验证即可

四、前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1.pandding值和 margin值均设置为 0

将html、body、a、li、ol、input、textarea、select、button等标签的 padding值和 margin值设置为 0。

设置统一的字体，如果使用 rem单位，则 html需要设置合适的字号。

设置统一的颜色，将 text-decoration属性设置为 none。

5.input、textarea、select、button等标签初始化

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器）与 Safari（苹果浏览器）内核：Webkit（中译无）前缀：-webkit-

2.IE（IE浏览器）内核：Trident（中译三叉戟）前缀：-ms-

3.Firefox（火狐浏览器）内核：Gecko（中译壁虎）前缀：-moz-

4.Opera（欧朋浏览器）内核：Presto（中译迅速）前缀：-o-

-webkit-border-radius: 10px;/谷歌浏览器/

-ms-border-radius: 10px;/ IE浏览器/

-moz-border-radius: 10px;/火狐浏览器/

-o-border-radius: 10px;/欧朋浏览器/

三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE浏览器使用 CSS hack（即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6、7的 hack符号：`~!@#$% ^&*()+= [ ]|<>,.任意一个符号

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8、9、10的 hack符号：\0

兼容 IE6、7、8、9、10的 hack符号：\9

.border-radius: 10px;/ IE6\7\8/

border-radius: 10px\0/;/ IE8/

border-radius: 10px\0;/ IE8\9\10/

border-radius: 10px\9;/ IE6\7\8\9\10/

2.为不同的版本编写独立的样式，其他浏览器识别不到。

例：大于 IE9的浏览器使用这个单独的 style9.css样式

例：只有 IE6浏览器使用的 style6.css样式

1.cursor属性的 hand值和 pointer值

问题：firefox浏览器不支持 hand值，但其他浏览器均支持 pointer值。

解决:统一使用 cursor属性的 pointer值。

问题：IE8及IE8以下版本浏览器不可通过设置 margin:0 auto实现水平居中。

解决:可通过设置父级 text-align:center实现。

问题：IE8及IE8以下版本浏览器不支持属性值“inherit”。

解决：谨慎使用属性值“inherit”。

问题：IE11不支持箭头函数、class语法等（报 SCRIPT1002:语法错误），不支持 Set和 Map数据结构（不报错）及 Promise对象，支持 let和 const，IE10及以下不支持任何 ES6语法。

解决：如果要兼容IE浏览器的项目请使用 ES5语法或者使用 Babel进行转换。

问题：IE9及 IE9以下版本浏览器，不能操作 tr标签的 innerHTML属性。

解决：可以操作 td标签的 innerHTML属性。

问题：IE9及 IE9以下版本浏览器无法使用 Ajax获取接口数据。

解决：在使用 Ajax请求之前设置 jQuery.support.cors=true。

问题：IE8及 IE8以下版本浏览器 event对象只有 srcElement属性，没有 target属性。

解决：obj= event.target?event.target:event.srcElement。

问题：IE8及 IE8以下版本浏览器是用 attachEvent()方法，而其他浏览器是 addEventListener()方法。

解决：判断 IE浏览器版本，如果是 IE8及以下事件绑定则使用 attachEvent()方法，注意 attachEvent()方法的用法，第一个参数为“onclick”而不是“click”。并且没有第三个参数。

文章到此结束，如果本次分享的谷歌浏览器解决cors问题和谷歌浏览器this site cant be reach的问题解决了您的问题，那么我们由衷的感到高兴！