html页面在其他浏览器中渲染不出来

文章讲述了在Vscode的LiveServer插件中,由于默认使用360浏览器打开HTML页面没有问题,但切换到谷歌浏览器后,由于file协议和http/https协议的差异,导致图表和数据无法渲染。谷歌浏览器出于安全考虑禁止了file协议的跨域访问。解决方法是通过LiveServer插件的设置,将默认浏览器改为谷歌,并配置相关规则,使得HTML页面能在谷歌浏览器上正确渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考文章

问题

Vs code软件中live sever插件设置默认的浏览器是360浏览器,所以一直以来页面都是默认在360浏览器上进行打开并且没有问题。
后面想换谷歌浏览器打开html页面看下效果,发现图表和数据渲染不出来:
在这里插入图片描述

报错信息:
用json模拟从后台读取的数据全都不能正常读取
在这里插入图片描述

原因

  • 在浏览器打开本地的html文件, 请求的模型资源文件是一个本地文件, 协议是file协议
  • 如果是在服务器启动的话,则使用的是http或者https协议。因为用了Live Server插件,相当于在服务器启动,因此出于安全性考虑, 谷歌浏览器默认禁止了这种用法。
  • file协议和http/https协议不同,会被谷歌浏览器认为是跨域访问,所以导致页面一直加载不出图表和数据

解决

在VS code中对Live Server插件进行相关配置的修改,具体如下:

  • 打开VS code的Live Server插件的设置:
    在这里插入图片描述

  • 对插件默认的浏览器进行修改:
    Live Server>Settings:Custom Browser
    在这里插入图片描述

  • 这里选择谷歌浏览器,然后对html页面重新进行运行,页面就可以完整地渲染在谷歌浏览器上了。若在其他浏览器渲染不出来也可以进行相关的设置修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值