关于html异步加载外部json文件报错问题
一. HTML代码如下：
参考网站（echarts-JSON请求数据）：https://blog.csdn.net/you23hai45/article/details/51585506
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-JSON请求数据</title>
<script type="text/javascript" src="./jquery.min.js" ></script> //js文件和data.json都在同一文件夹
<script type="text/javascript" src="./echarts.min.js"></script>
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart); chartData.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
}); $.get('./data.json').done(function (data) { console.dir("data:"+data); //看看json的数据
console.dir("data.name:"+data.name); // object
console.dir("data.data:"+data.data); // object
console.dir(typeof(data)); //控制台输出的格式 // 填入数据
// var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式
chartData.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.data
}]
}); }); function eConsole(param)
{
console.dir(param);
} chartData.on("click",eConsole);
}); </script>
</head>
<body>
<div id="chart" style="width: 900px; height: 600px;"></div>
</body>
</html>
二. data.json文件如下：
{
"name": [
"苹果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
三. 以上面的方式访问会报错。如下：
报错内容：jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/14620/Desktop/Echarts/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
四. 解决方法：
参考网站（【调试错误】Access to XMLHttpRequest at file:E590/ceshi.json from origin null）：https://blog.csdn.net/OrangeChenZ/article/details/84986648
谷歌不允许这样访问。
本地部署网站web。
解决方式一：将html页面部署到服务器再访问。
如何部署？
第一步：控制面板->程序与功能->启用或关闭windows功能
Internet Information Services 前面的复选框勾上。
第二步：我的电脑右键->管理->添加网站
注：主机名不填，用localhost:1213访问本地服务器。
报错1：
HTTP 错误 403.14 - Forbidden
Web 服务器被配置为不列出此目录的内容。
解决1：
启用目录浏览。
报错2：
HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。
解决2：
网站1213右键->编辑权限->安全->添加Everyone权限
报错3：
HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页
解决3：
打开IIS管理器，操作如下：
1.功能视图--身份验证--匿名身份验证--编辑--选择应用程序池标识，启用匿名身份验证；
2.功能视图--授权规则--右键添加允许规则--选择所有匿名用户；
3.保证虚拟目录访问权限，可以添加everyone用户授予所有权限！
至此：localhost:1213成功访问。
打开HTML文件：
（over）
关于html异步加载外部json文件报错问题的更多相关文章
- JBoss 系列十四：JBoss7/WildFly如何加载外部的文件或properties文件
http://www.tuicool.com/articles/M7ZR3y 原文 http://blog.csdn.net/kylinsoong/article/details/12623997 主 ...
- Vue 加载外部js文件
Vue.js 加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...
- Android 插件化开发（二）：加载外部Dex文件
在学习Java反射的技术后,我们可以开始更深一步的探究插件化开发了.首先先讲一下Android App的打包流程,然后我们通过一个简单的例子 —— 实现插件化加载外部Dex来完成初级的插件化开发的探索 ...
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- Spark动态加载外部资源文件
Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...
- WPF加载Winform窗体时 报错：子控件不能为顶级窗体
一.wpf项目中引用WindowsFormsIntegration和System.Windows.Forms 二.Form1.Designer.cs 的 partial class Form1 设置为 ...
- 导入json文件报错，TypeError expected string or buffer
导入json文件报错,TypeError expected string or buffer 原因:用字符串赋值后,python会把双引号转换为单引号 import json data = [{&qu ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- 如何调试异步加载的js文件（浏览器调试动态加载js）
描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...
随机推荐
- 单IP、网络、别名管道限速的设置
单IP.网络.别名管道限速的设置 在设备上,控制网络限速最常用的是流量×××中的“限制器”,你可以把它理解为一个管道,20Mit/s的下载管道,那么下载的最大流量就不会超过20Mit/s.流量限制器结 ...
- 文件包含漏洞File Inclusion
文件包含漏洞 目录遍历漏洞在国内外有许多不同的叫法,也可以叫做信息泄露漏洞.非授权文件包含漏洞等. 文件包含分类 LFI:本地文件包含(Local File Inclusion) RFI:远程文件包含 ...
- python3中try异常调试 raise 异常抛出
一.什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Py ...
- Solr字段类型
一.一般属性 1.name fieldType的名称.该值用于字段定义中的类型属性,强烈建议名称仅包含字母数字和下划线,不能以数字开头[非强制]. 2.class 用于存储和索引此类型数据的类名.可以 ...
- Linux添加硬盘创建新的逻辑卷方式
有同仁看了上文<Linux添加硬盘扩充已有分区存储空间方式>一文后,提出疑问,现在很多云服务器本来没有逻辑卷,添加数据盘后需要自行添加,如何处理? 此文将以某云服务器为例,详细进行解说. ...
- node.js 学习一
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. 与PHP 相似 都是单进程. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调 ...
- Redis：Linux安装与使用
Redis的存储结构:字符类型,散列类型,列表类型,集合类型,有序集合. Redis功能: 可以为每个key设置超时时间. 可以通过列表类型来实现分布式队列的操作. 支持发布订阅的消息模式. 为什么使 ...
- Vue+Django项目部署
本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOST ...
- 你真的理解CountDownLatch与CyclicBarrier使用场景吗？
原文:https://blog.csdn.net/zzg1229059735/article/details/61191679 相信每个想深入了解多线程开发的Java开发者都会遇到CountDownL ...
- 微信小程序~下拉刷新PullDownRefresh
一.onPullDownRefresh回调 代码: // http://itlao5.com onPullDownRefresh: function () { console.log('onPul ...