-
需要请求本地json文件数据，彻底解决协议及跨域问题
2019-07-15 16:03:48不要在url直接写相对路径的地址,浏览器报错： Cross origin requests are only supported for...需要把文件放到服务器，可以自己安装配置一个apache：下载安装配置apache 把json文件放到htdocs文件里，使用url地址：...展开全文不要在url直接写相对路径的地址,浏览器报错：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
需要把文件放到服务器，可以自己安装配置一个apache：下载安装配置apache
把json文件放到htdocs文件里，使用url地址：127.0.0.1/xxx.json进行请求，可能会出现跨域请求的错误，如果你使用的是插件，无法配置dataType: 'jsonp’等
则修改apache根目录里的 httpd.conf 的部分配置
#LoadModule headers_module modules/mod_headers.so
去掉前面的 #
之后在：<Directory /> AllowOverride All Require all granted </Directory>增加：Header set Access-Control-Allow-Origin *
改为：<Directory /> AllowOverride All Require all granted Header set Access-Control-Allow-Origin * </Directory>然后，就可以请求到本地模拟的数据了；
-
vue请求服务器上的json数据跨域问题
2021-01-08 14:42:19vue请求服务器上的json数据跨域问题 开发环境 问题： 本地直接使用axios请求会报跨域错误 解决方法： 在config文件下找到index.js，vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。 proxy...展开全文vue请求服务器上的json数据跨域问题
- 开发环境
问题：
本地直接使用axios请求会报跨域错误
解决方法：
在config文件下找到index.js，vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。proxyTable: { '/json': { target:"http://xx", //你请求的地址 changeOrigin: true, pathRewrite: { '^/json': 'http://xx' //替换target中的地址，项目中请求http://xx就直接写成/json就可以了 } }, }, },修改完配置后，需要重新 npm run dev
- 生产环境：
配置完后本地请求就不会报跨域了
再在发起请求的地方加上一个判断就可以兼顾线上的请求问题
解决方法：let mapDataUrl = '' if(process.env.NODE_ENV === 'development'){//判断是否是开发环境 mapDataUrl = '/json'+'xx'+'.json'//开发网址用刚才的配置好的/json }else{ mapDataUrl = 'http://xx'+'xx'+'.json'//生产环境的网址直接写 } this.$axios({ url:mapDataUrl, })
-
在html中请求本地json文件的三种方法
2021-04-11 11:30:19在使用D3请求本地json文件的时候出现了跨域问题，探索了下整理了想到的三种解决方法。 一、问题定位 先看下我出问题的程序，这个程序是在html页面中，用d3抓取本地的bar.json 作为数据源，操作dom来用svg绘制柱状图...展开全文
引言
在使用D3请求本地json文件的时候出现了跨域问题，探索了下整理了想到的三种解决方法。
一、问题定位
先看下我出问题的程序，这个程序是在html页面中，用d3抓取本地的bar.json 作为数据源，操作dom来用svg绘制柱状图。程序代码如下:
<!DOCTYPE html> <html> <head> <title>D3 Page</title> <script type='text/javascript' src='Scripts/d3.js'></script> <script type='text/javascript' src='test.js'></script> <link href="styles/char_6.css" rel="stylesheet"> </head> <body> </body> <script type='text/javascript'> d3.json('bar.json', function (json) { return json }).then(function (json) { //解析数据 var dataset = json['dataset'] //获取svg画布 var svg = d3.select("body") .append("svg") svg.attr("width", 500) .attr("height", 200); //保存矩形数组的选择器 var rects = svg.selectAll("rect") .data(dataset) //匹配 .enter() //选中 .append("rect") //根据数据设置柱形图的大小 rects.attr("class", "rec") .attr("x", function (d, i) { return (i * 20) + 10 }) .attr("y", function (d) { return (200 - Number(d) * 4).toString() }) .style('height', function (d) { return 4 * d + 'px' }) .attr("fill", function (d) { return "rgb(0,0," + Math.round(d * 10) + ")"; }); //添加标签 var texts = svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function (d) { return d; }) texts.attr("x", function (d, i) { return (i * 20) + 13 }) .attr("y", function (d) { return 215 - d * 4; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") }) </script> </html>直接打开html页面，没有效果接着我打开devTools 的控制台一看报了一个跨域错误。抛出了个Fetch API的异常（说明d3.json这个方法底层是调用的Fetch API），显示了一个跨域错误。（关于跨域是什么详情可以看下跨域资源共享-MDN ,跨域资源共享 CORS 详解–阮一峰)也就是说访问本地文件是不被浏览器允许的那则么解决这个问题呢?
二、解决方法
1. 把json作为一个js的对象引入
因为，json本身就来自于js语法和js相同，所以可以把json内容复制到一个js的对象中，然后把这个js文件引入html页面。
- 定义一个js文件
let aa = { dataset: [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ] }- 引入到目标html页面
<script type='text/javascript' src='test.js'></script>2. 把html页面运行到一个应用服务器上
直接访问会遇到跨域，那我们可以绕开跨域，把我们的页面和本地文件都放在同一个应用服务器上，不跨域了自然就没有跨域问题了。
- 用python3自带的http 服务器
在命令行输入
python -m http.server portport:端口号 默认是8000 端口，如果你要改再指定。
详情可以看python的官方文档
http.server — HTTP 服务器 — Python 3.9.4 文档- 用express.js
python自带的http服务器性能比较差，如果你经常改动html页面保存，刷新。过段时间会卡主。 可以用node的express.js的静态文件功能。把html页面放到静态文件夹里。
const express = require('express'); const logger = require('morgan'); const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.use(logger('dev')) app.use(express.static('./')) app.listen(3000, () => { console.log('示例应用正在监听 3000 端口!'); });note: 1. express.static(’./’) 这个方法里面 './'表示的是指定的放静态文件的文件夹。默认是当前根目录下的static目录。
3. 把本地文件放在一个加了跨域头的应用服务器上
上面内个方法是绕过了跨域而这个方法是在服务器端解决了跨域请求（不清楚跨域问题的可以看引言部分我给出的两个链接）
为了访问本地文件，自己写一个处理好跨域请求的服务器有点呆。我们可以用人家现成的工具。我这里用的json-server。json-server是一个基于express.js默认开启跨域的应用服务器，经常被前端用来mock后端请求用。使用的时候只需要一行代码非常方便。 详情见npm里的说明npm json-server
json-server --watch bar.jsonNote: 1.默认的静态文件夹是 static，可以通过命令修改。
总结
本文主要介绍了在html页面中访问本地json文件的三种方法，分别是将json文件变成js对象引入，将html页面放到应用服务器上，将本地文件放到处理了跨域请求的应用服务器上。如果不是在html页面中用的话，其实还可以用node的fs模块。
对我的文章感兴趣的话欢迎大家去我的个人博客踩踩哦!
(｀∀´)ノ亻
https://xwdxixi.gitee.io/xwdblog/
-
@vue/cli4(包括3)项目axios请求获取本地json文件数据
2020-02-27 22:11:42在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。 vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录...展开全文在前端开发过程中，当后台服务器开发数据还没完善，无法与我们交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。
vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件，vuecli3、4没有static文件夹了，那咋办？有人说我创一个static文件夹在下面继续写json文件不就行了。但结果会报错，请求404找不到文件。
1. @vue/cli已经默认将静态文件改存在public文件夹下了。
static文件夹在配置中已经识别不出了。我们在public文件夹下编写json文件作为模拟数据：
2. 项目安装axios，导入axios，创建get()异步请求：
这里可能会有朋友疑问了，诶？请求路径不应该是'public/data/xx.json'吗？注意了如果路径这样写反而会报错404找不到。3. 转发api路径代理设置。
开发情况下我们像上面这样改写路径其实是不合理的，默认我们将相对路径写为'/api/xxx'，那如何将/api指向实际的数据文件路径，实现转发？旧版本下我们会在vue.config.js下配置proxy属性，但新版本这个js文件已经不在目录下了，我们需要手动创建。//在根目录下创建vue.config.js,如下配置： module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', //路径指向本地主机地址及端口号 ws: true, changeOrigin: true, pathRewrite:{ '^/api': '/data' //路径转发代理 } } } } }
4. 将axios请求路径更改为/api。
做完以上步骤和避开雷区，已经可以成功在vuecli3、4版本项目上请求到本地json文件的数据了。等到和后台对接时，只要和后台工作人员确认好数据所在的主机地址端口号和存放路径，更改vue.config.js文件配置即可。
-
ajax请求本地json文件，谷歌浏览器报跨域错误
2019-04-11 22:16:02前端在做页面的时候，有时候需要可能为了测试某一功能，或者为了自己做demo，会访问本地json文件，获取数据，进行处理；但最近发现使用ajax请求json文件的时候，谷歌浏览器报错如下： Access to XMLHttpRequest at ... -
vue请求本地自己编写的json文件
2019-10-16 16:23:431.目录结构（配置的js文件、要引入json的vue文件、自己编写的json文件） 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码： constexpress=require('express') constapp=express() ... -
通过http服务请求本地json文件
2018-05-28 08:06:18url:"json/Goods.json" }).then(function success (response) { $scope.Goods = response.data; },function error (response) { $scope.Goods = "请求失败"; }); /*赋初值*/ $scope.search = "";... -
关于本地文件请求json文件
2016-11-23 18:01:12因为需要用到json数据格式，上网查了一下例子之后我就想本地测试一下看能不能成功。 结果，chrome下没有任何反应，打开控制台之后报错如下： XMLHttpRequest cannot load file:///E:/... -
详解vue中使用express+fetch获取本地json文件
2020-11-30 09:59:12自己在做个vue小demo的时候，想模拟从服务器获取json数据的过程，一开始的想法是使用fetch直接获取本地的json文件，无论是install了json-loader还是把json文件放在index.html的目录下或webpck.config.js里output的... -
使用本地json文件模拟ajax请求，出现的跨域问题
2019-10-10 10:14:12当使用谷歌浏览器访问我们本地的json文件时，如果没有安装Apache等本地服务器，直接访问时json文件时，浏览器会报错，提示跨域相关的问题：Cross origin requests are only supported for protocol schemes: http, ... -
通过jquery的ajax请求本地的json文件
2016-09-13 10:38:57自己学习jquery的ajax的经历，记录一下 ... 在body里面放一个id为test的div 第一步还是要先加载jquery文件 jquery.min.js script> $(function(){ $.ajax({ //请求方式为get type:"GET", -
vue部署到服务器上访问.json文件返回404错误
2019-10-13 20:23:36问题描述 部署到服务器上的.json不能访问，而在本地能访问 原因 iis服务器没有MIME类型没有添加.json类型 解决方法 -
本地服务器中直接访问json文件而非下载
2018-06-21 16:22:37在本地的nginx(apache一般配置json类型)服务器上访问json.如需在浏览器上显示该json数据，而并非直接被下载，需做以下配置 ：1 .打开文件 ..\nginx\conf\mime.types,不同的安装可能路径略微不同，找到mime.types文件... -
axios请求本地json
2019-05-22 15:30:24axios请求本地json,相关依赖安装 1：npm安装 npm install axios --save 2.在main.js下引用axios ...1：在static文件夹底下新建json文件，（ 本地JSON文件一定要需放在static文件夹之下。） 访问服务器... -
vue-resource请求本地json文件
2017-05-24 10:14:38在平时项目开发中，有时后台接口跟不上前台开发的进度时，需要我们自己写先写本地的json文件，这样我们可以把静态界面和逻辑一起调试了，等后台来了接口，替换请求地址即可。但是在vue的项目中，网路请求不是ajax... -
《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》
2021-08-10 14:05:49有些js在读取本地文件出现浏览器跨域问题，在此提供解决方法： 问题：同源策略禁止读取位于 c:/... 的远程资源。（原因：CORS 请求不是 http）解决方法：跨域设置: 1、打开火狐浏览器：输入"about:config" 2、点击... -
通过Ajax读取本地json文件，提示跨域的原因和解决方法
2019-04-23 16:23:57通过Ajax读取本地json文件，谷歌报错提示跨域 本地写有一个 .json 代码文件，然后网页文件使用ajax读取，并用谷歌浏览器打开，发现谷歌报错：提示跨域。 谷歌浏览器控制台报错 但是跨域一般是由于协议、域名、端口... -
部署在服务器上的应用请求json文件返回404解决方法及原因分析
2017-11-14 14:27:22解决方法最近在做项目的时候，碰到了一个怪事儿，明明json文件放在服务器对的位置，url也查了好几遍，但是每次请求json文件时，却总是返回404找不到文件。 -
NodeJs本地搭建服务器，模拟接口请求，获取json数据
2018-10-11 17:40:00一般是前端先制作静态页面，同时服务器端创建数据库，搭建服务器端框架，写接口；当接口写完之后，前端或者后端才能嵌套页面。但是如果前端页面制作好了，后端接口还没有写好呢？或者如何让前端、后端各自做各自的... -
手把手教你vue配置请求本地json数据
2018-12-14 21:13:04本篇文章主要介绍了vue配置请求本地json数据的方法，分享给大家，具体如下：在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require('portfinder')后添加 const express = require('express') ... -
Vue+axios请求本地json
2019-05-10 08:46:00axios请求本地json,相关依赖安装 1：npm安装 npm install axios --save ...2.在main.js下引用axios import axios from 'axios' ...一切环境依赖搭建好之后,下面来写个...1：在static文件夹底下新建json文件，（ ... -
全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件
2017-08-07 16:34:23上一节课，我们已经基本完成了，首页的界面编写。 逻辑暂时不理会。 但是我们用于展示页面绑定的是我们本地的假数据。 接下来我们就来获取真正的数据来展示页面。 绑定假数据编写页面算是前段最早做的一件事情吧。 ... -
ajax请求本地json
2019-05-09 11:34:30AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,通过在后台与服务器进行少量数据交换，AJAX ...ajax请求本地json test.json { "first":[ {"name":"王小婷","nick":"祈澈菇凉"}, {"name"... -
axios请求本地json报错404
2019-12-20 12:38:14试了网上的方法：把json文件放在最外层的static文件夹中，还是报错 最后发现要把请求路径设为绝对路径，直接从根文件查找 -
访问本地json文件的方法
2017-08-14 15:26:27情景：在一个js文件中访问该工程中的另一个本地json文件 这个问题本身很好解决，这里提供两个方法，先介绍一些可能会让初学者迷惑的知识点： 1.URL编码：利用一个百分号和16进制数字来对字符进行编码，JS提供了... -
vue cli3.0访问本地JSON文件
2019-06-19 20:26:29vue cli3.0访问本地JSON文件 最近练习axios发起数据请求，模拟后台访问数据，发现请求地址一直报错404，查阅了相关资料才知道vue-cli3.0中静态资源要放在static文件夹下。我是通过引入jQuery发起ajax请求，然后地址... -
Nodejs读取本地json文件，输出json数据接口
2018-08-06 14:27:58data.json文件内容 { &amp;quot;code&amp;quot;: 0, &amp;quot;msg&amp;quot;: &amp;quot;请求成功&amp;quot;, &amp;quot;data&amp;quot;: [ ...
