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

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

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

  通过查询书籍和相关技术大神的技术贴,我大致了解到了引发此问题的2个主要原因:
  1. 浏览器因安全问题,不允许javascript访问本地文件
  2. 因跨域访问而导致的错误

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

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

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

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

访问本地json文件因跨域导致的问题的更多相关文章

  1. html文件引用本地js文件出现跨域问题的解决方案

    在本地做个小demo,很简单,一个html文件,一个js文件,在html文件中通过<script>标签引入js,但是出现了一个意想不到的问题:浏览器报错—— 一番折腾后,终于弄明白了:加载 ...

  2. 谷歌通过ajax获取本地JSON文件,为什么会显示跨域?转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  3. 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  4. js 读取外部的本地json文件

    Javascript 读取外部的本地json文件 方案1 运行本地web服务器,提供文件服务 方案2 1.data = '[{"name" : "Ashwin" ...

  5. form上传文件以及跨域异步上传

    要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...

  6. node.js简单搭建服务,访问本地站点文件

    1.安装nodejs服务(从官网下载安装),node相当于apache服务器 2.在自己定义的目录下新建服务器文件如 server.js 例如,我在D:\nodeJs下创建了server.js文件 v ...

  7. 读取本地json文件,并转换为dictionary

    // 读取本地JSON文件 - (NSDictionary *)readLocalFileWithName:(NSString *)name { // 获取文件路径 NSString *path = ...

  8. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  9. HTML5实现本地JSON文件的读写

    参考: 使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileRead ...

随机推荐

  1. 用 const 还是用 let?

    ES6 里新增了两种声明变量的方式,let 和 const,加上原来的 var,一共就有三种方式来声明变量了.那到底该用哪个呢?关于“尽可能不用 var” 这一点,大家应该没有什么意见分歧(其实还是有 ...

  2. 更改CentOS 6.3 yum源为国内163源

    CentOS5.x: http://mirrors.163.com/.help/CentOS5-Base-163.repo CentOS6.x: http://mirrors.163.com/.hel ...

  3. Ural 1057 Amount of Degrees

    Description 问[L,R]中有多少能表示k个b次幂之和. Sol 数位DP. 当2进制时. 建出一个二叉树, \(f[i][j]\) 表示长度为 \(i\) 有 \(j\) 个1的个数. 递 ...

  4. 【SCOI2005】 最大子矩阵 BZOJ 1084

    Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. Input 第一行为n,m,k(1≤n≤100,1≤m≤2 ...

  5. ffmpeg-20160828-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 5 屏幕横向放大 20 像素 6 屏幕横向缩小 20 像素 S 下一帧 [ -2秒 ] +2 ...

  6. c/c++ string.h

    操作数的都是 ( char * )型,操作时不考虑末尾的'\0',操作数必须是指向字符串的指针("a"),不能是字符('a'). size_t strlen( const char ...

  7. 实现tableview的下拉刷新

    实现tableview的下拉刷新 推荐第三方下拉刷新代码http://code4app.com/ios/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E4%B8%8B%E6 ...

  8. 《BuildingMachineLearningSystemsWithPython》学习笔记

    BuildingMachineLearningSystemsWithPython Python机器学习入门 数据分析五个步骤 读取和清洗数据 探索和理解输入数据[我的理解是业务理解] 分析如何将算法应 ...

  9. Datatables JQuery插件

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...

  10. cacti添加主机监控

    登入cacti后 主机-->添加-->填入信息.如下图所示 填好后点击右下角添加 添加完.左上角出现如下信息.说明被监控的服务器snmp工作正常. 然后咱们给这个主机添加图形. 当前主机模 ...