chrome浏览器中加载本地json文件报错的解决办法

今天代码中,引入了一个本地的json文件,使用了getJSON函数来获取它的数据并打印,具体代码如下:


获取数据的代码

但是在谷歌浏览器中打开运行的时候报错,具体报错如下:


报错信息

网上查了一下,说是因为同源策略导致的本地文件无法直接获取。浏览了一大圈,大致的解决办法分为两类,

一类是通过修改浏览器的一些配置,找了几个方法试了一下,没有效果。第二类方法,将整个文件夹都放到本地服务器中,这样访问的时候文件就都在同一个域中,从而解决问题。于是第二类方法走起:

首先,下载了WAMPServer的软件并安装后打开,任务栏的右下角出现绿色的小图标就是正确启动了


正确启动的时候是绿色的

第二步:在绿色图标上左键单击(注意是左键),然后单击www directory选项,会自动到一个目录


跳转过来的目录

这个目录就是用来存放你的项目文件的地方,将你写好的整个项目文件放到这里,例如我上面的final2文件夹

第三步:打开浏览器,输入http://localhost/final2之后回车,就可以打开final2文件夹下面的index.html文件。这是默认的,如果你想打开其他的html文件,可以继续输入文件名即可,例如http://localhost/final2/mutao/test/dropdown.html 就可以打开dropdown.html 文件

这个时候再打开控制台,你就会发现之前的报错没有了,想要打印的数据正确的打印出来了


数据正确的获取到了

OK,大功告成!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,374评论 0 3
  • chrome扩展开发入门教程 最近在开发chrome插件,看到一篇非常适合入门的教程,特记录一下 注:转载 本文首...
    谢大见阅读 6,477评论 1 25
  • Web网站测试流程和方法(转载) 1测试流程与方法 1.1测试流程 进行正式测试之前,应先确定如何开展测试,不可盲...
    夏了夏夏夏天阅读 1,327评论 0 0
  • 1、Excel打印技巧大全 没有打印机一样可以打印预览 在没有安装打印机的电脑上按下Excel的“打印预览”按钮后...
    枫林又晚阅读 3,986评论 0 17
  • 我是一名95后,也是一个开学就要大四的学生。 因为心中有一些事情不知道和谁说,感觉很憋屈,所以想写下这一篇文章。 ...
    拘谨如何阅读 463评论 0 0