访问本地json文件因跨域导致的问题

2023-06-25,,

我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下:

$.getJSON("invite_panel.json",function(data){//获取json文件中的数据
$.each(data, function (index, obj) //对json数据进行遍历
}

因我获取的是本地的 json 文件数据,因此导致了跨域问题,使得大部分主流浏览器报错,并无法获取本地的 json 文件,使用chrome浏览器查看错误如下:

  通过查询书籍和相关技术大神的技术贴,我大致了解到了引发此问题的2个主要原因:

    浏览器因安全问题,不允许javascript访问本地文件
    因跨域访问而导致的错误

针对此问题,大致的解决方法有三种:

    对于浏览器快捷方式做出改变,改变浏览器的安全模式,在快捷方式属性中的目标位置后 添加“--disable-web-security”或“ --allow-file-access-from-files”的方式。可正常的读取json文件内容。(但此方法会降低浏览器安全性,不推荐使用此方法)
    通过使用 jsonp来解决主流浏览器的跨域数据访问问题
    通过在服务器端做一些小小的改造,添加响应头:

header('Access-Control-Allow-Origin:*;);

              header('Access-Control-Allow-Methods:POST:GET');
 
  对于以上这几种方法能够基本的解决因跨域问题,使得无法获取本地json文件的问题了,通过此次的教训,我以后应该不会再使用此类方法来获取json文件。
  选择使用jsonp来获取可能是一种更好的选择。

访问本地json文件因跨域导致的问题的相关教程结束。

《访问本地json文件因跨域导致的问题.doc》

下载本文的Word格式文档,以方便收藏与打印。