参考文章
问题
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页面重新进行运行,页面就可以完整地渲染在谷歌浏览器上了。若在其他浏览器渲染不出来也可以进行相关的设置修改。