一、前言

最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时，

制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；

解决方案： 在本地启动一个http服务，使用http://127.0.0.1:8080的方式访问，即可解决上述问题；

下面我们来介绍一下具体实现方案！！！

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

二、分析&解决方案

原因： 采用file:///G:/echarts_sample/6th_异步加载数据.html方式访问，会因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取本地的json数据，异常截图如下：
解决方案： 在本地启动一个http服务，使用http://127.0.0.1:8080的方式访问即可，这里我们用http-server来搭建本地服务。

三、Http-Server简介&安装方法

Http-Server是一个简单、零配置、命令行http服务，一般用于前端开发在本地开启http服务器来测试。
安装 nodejs 和 npm，详见：《nodejs_npm安装配置详细教程》
安装 http-server，打开终端，输入以下命令：
npm install http-server -g

四、启动http本地服务方法

打开cmd，切换到当前echarts项目文件夹，在当前项目根路径下输入以下命令即可：
http-server [path] [options]
常用命令：http-server -c-1，作用： 开启http服务器，并禁止浏览器缓存；
注意：如果 public 文件夹存在，[path]默认为 ./public，否则为根目录 ./
现在，我们就可以用http://127.0.0.1:8080来访问刚启动的本地服务器了，如下：
点击 6th_异步加载数据.html文件，我们制作的 echart 图表是不是渲染出来了\(^o^)/

五、附：Http-Server可选配置

-p 要使用的端口（默认为8080）
-a 要使用的地址（默认为0.0.0.0）
-d 显示目录列表（默认为“True”）
-i 显示autoIndex（默认为“True”）
-g 或–gzip启用时（默认为“False”），它将用于./public/some-file.js.gz代替./public/some-file.jsgzip压缩版本的文件，并且该请求接受gzip编码。
-e 或–ext默认文件扩展名（如果没有提供）（默认为’html’）
-s 或–silent从输出中抑制日志消息 –cors通过Access-Control-Allow-Origin标题启用CORS
-o 启动服务器后打开浏览器窗口
-c 设置缓存控制max-age头的缓存时间（以秒为单位），例如-c10 10秒（默认为’3600’）。要禁用缓存，请使用-c-1。
-U 或–utc在日志消息中使用UTC时间格式。
-P 或–proxy代理无法在本地解决给定网址的所有请求。例如：-P http://someurl.com
-S 或–ssl启用https。
-C 或–certssl证书文件的路径（默认值：cert.pem）。
-K 或–keyssl密钥文件的路径（默认值：key.pem）。
-r 或者–robots提供一个/robots.txt（其内容默认为’User-agent：* \ nDisallow：/’）
-h 或–help打印此列表并退出。

Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用相关推荐

使用Sencha Touch加载本地Json数据
本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.dat ...
Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
加载本地json文件,并利用批处理调用Chrome显示html
加载本地json文件 1.加载本地json文件为了调试保存在本地的json数据,需要进行读入.一般使用jQuery来进行,但需要对浏览器进行一点设置. Chrome浏览器中有一个启动选项--allo ...
js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好而且外面还下雨了,每天只能坐在老家打开电脑,看看文章,写写文章今天我给大家带来一篇Flutter加载本地JSON文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者,「 ...
解决mysql load data加载本地null数据，表里出现0的情况
解决mysql load data加载本地null数据,表里出现0的情况问题说明: sql执行语句如下代码块: ---- 欢迎讨论沟通 ---- 问题说明: 本人在使用mysql加载本地数据过程中, ...
第18.1节 OE3.1实例-加载本地瓦片数据
致谢感谢网友提出这个问题.大家有问题也可以在评论区提出,有问必有答.如果涉及商业需求,需要较完整/详尽的工程,可以联系作者133-2459-8743. 问题描述网友提出要做一个基于osgearth ...
异步请求动态加载页面
最近现在在做的项目需要前后端分离,并且还有一些国际化的原因,需要动态替换页面上的一些元素,我简单的和前端同学说了一下我的思路,但是前端同学貌似没太明白,于是自己写了个demo. 大致思路是这样的:先从 ...
easyUI +datagirdview加载本地json的方式笔记
第一种加载代码里面的json数据,json数据就放到script里面 <head><meta charset="UTF-8"><title>Ba ...
easyui使用ajax获取json文件,easyui 加载本地json 文件的方法
1.1使用内置的Camara应用程序捕捉图像一: Camara应用程序包含的意图过滤器发布时去掉 debug 和提醒日志,简单无侵入在 proguard 文件中加入下面代码,让发布时去掉 de ...

Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用

文章目录

一、前言

二、分析&解决方案

三、Http-Server简介&安装方法

四、启动http本地服务方法

五、附：Http-Server可选配置

Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用相关推荐

最新文章

热门文章