我使用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. 深入理解IoC/DI

    ------------------------------------------------------------------------ 理解IoC/DI 1.控制反转 --> 谁控制谁 ...

  2. tyvj1089 smrtfun

    背景 广东汕头聿怀初中 Train#2 Problem3 描述  现有N个物品,第i个物品有两个属性A_i和B_i.在其中选取若干个物品,使得sum{A_i + B_i}最大,同时sum{A_i},s ...

  3. hadoop集群安装无密码登录

    http://blog.csdn.net/qiuchenl/article/details/7999044 hadoop安装:http://aperise.iteye.com/blog/2245547 ...

  4. 【强烈推荐】利用NAT、Host-Only双虚拟网卡,实现Virtual Box中CentOS6.3联网

    问题背景: 先前都是在Virtual Box中以“网络共享”方式,让里面的Linux虚拟机Host-Only方式联网,参考如下: Virtual Box下配置Host-Only联网方式详解 但最近被公 ...

  5. ecshop商品子分类点击下拉,子分类空时,直接跳转功能

    模板文件循环读取商品分类,并给大分类加上url属性.然后在js中判断是否有下级分类.有分类则点击下拉效果,没有子分类则跳转到url属性的链接去. themes/**/library/category_ ...

  6. Nginx上传文件返回413的解决

    通过http上传文件时返回403 Request Entity Too Large错误时,原因是默认设置的允许上传文件太小,默认是2M,如果上传文件大小大于2M时,那么就会返回413的错误,修改ngi ...

  7. Other Linker Flags到底是什么

    一.问题描述 在项目开发中用到百度地图,有时候在工程中会报“方法找不到”的错误(unrecognized selector sent to instance). 二.问题分析 首先,要说明一下Othe ...

  8. 基于STM32和W5500的Modbus TCP通讯

    在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...

  9. Caffe初试(二)windows下的cafee训练和测试mnist数据集

    一.mnist数据集 mnist是一个手写数字数据库,由Google实验室的Corinna Cortes和纽约大学柯朗研究院的Yann LeCun等人建立,它有60000个训练样本集和10000个测试 ...

  10. GitHub使用心得

    PHP今天算是学习结束了;版本控制也了解很久了,比较熟悉的是svn,Git一直都不太熟,也可能是它是英文的缘故,感觉很费劲,所以用的不多,但不得不说,它功能真的很强大;今天试着和朋友用Git开发一个简 ...