访问本地json文件因跨域导致的问题
我使用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-Methods:POST:GET');
对于以上这几种方法能够基本的解决因跨域问题,使得无法获取本地json文件的问题了,通过此次的教训,我以后应该不会再使用此类方法来获取json文件。
选择使用jsonp来获取可能是一种更好的选择。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?