《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》

前述：终于抽出时间，整理了一些编程所需基础知识。

有些js在读取本地文件出现浏览器跨域问题，在此提供解决方法：

(chrome:单独运行html文件有跨域问题目前无法设置，但可以用WebStorm中的Chrome(无法应用请看:彻底卸载chrome:https://blog.csdn.net/xysxlgq/article/details/119598264)。其他：若在应用程序中运行没有浏览器限制，也不用设置。)

火狐浏览器提示：同源策略禁止读取位于 c:/... 的远程资源。（原因：CORS 请求不是 http）
解决方法：跨域设置:
1、打开火狐浏览器：输入"about:config"
2、点击”接受风险并继续”
3、搜索”security.fileuri.strict_origin_policy”,设置为：false
4、关闭浏览器再打开。

注意：加载页面后提示：XML 解析错误：格式不佳，可忽略。
下面为loginfo。

如下所示：

Html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>json file</title><!--<script src="jquery-3.6.0.min.js" ></script>--><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<script type="text/javascript">$.ajax({url: "./JsonFile/Project.json",type:'GET',dataType:'json',success: function(data) {var json=eval(data.Project);console.log(json);for(i=0;i<json.length;i++){console.log(json[i].ProjectName);}}});
</script>
</body>
</html>

Project.json

{"Project": [{"id": "ffsde42jj4k2f33gh2ew4eef34545j","ProjectName": "北京xxx招标项目"},{"id": "fhghrree42jj4k2f33gh2ew4eef34545j","ProjectName": "上海xxxx1标造价项目"},{"id": "fhhss2jj4k2f33gh2ew4eef34545j","ProjectName": "天津xxx机电xxx"}]
}

二、js保存json到本地：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js保存json到本地</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">var div=document.getElementById('div');//生成json数据var total = 1000, json = [];for(var i = 0; i < total; i++){json.push({id:i+"df4"+(i+45)+"urt",column:(i+3)});}//json转string字符串var content = JSON.stringify(json);var a = document.createElement('a');a.download = "jsonjson.json";var blob = new Blob([content]);//转bloba.href = URL.createObjectURL(blob);// 添加到bodydiv.appendChild(a);//点击a.click();// 删除a// div.removeChild(a);
</script>
</body>
</html>

《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》相关推荐

最新Chrome浏览器跨域设置
最新Chrome浏览器跨域设置注意,设置跨域后会设置为全新的浏览器,最好是先新建一个快捷方式在桌面老版本设置在桌面新建一个Chrome浏览器的快捷方式,右键选择属性-目标,添加" -- ...
Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
firefox 火狐浏览器跨域设置
在用开发Web应用时,常常需要跨域请求资源,这就需要解除浏览器的跨域限制. 否则会报已拦截跨源请求:同源策略禁止读取位于 ..... 的远程资源.(原因:CORS 头缺少 'Access-Contr ...
vue 什么是渐进式响应式意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是轻量的模型视图视图模型框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
JS前端创建html或json文件并浏览器导出下载
一.HTML与文件下载如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" ...
什么是浏览器跨域访问操作，js如何实现？
什么是浏览器跨域访问操作,js如何实现? 浏览器从一个域名的网页去请求一个域名的资源时,域名.端口.协议任一不同,都是跨域. 三种方法实现js跨域访问: 1.基于iframe实现跨域.基于iframe ...
js读取服务器txt文件,ZK中使用JS读取客户端txt文件内容问题
最近写一个需求时遇到一个问题,用户需要通过点击一个按钮直接读取他自己电脑上D盘的一个txt文件内容显示到页面,因为项目现在是用ZK写的.我对于ZK也是刚刚了解不就,很多都还不是很熟.起初我是想用io流 ...
chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
详解浏览器跨域访问的几种办法
摘要: 本文讨论web前端安全问题以及应对措施,浏览器同源策略以及对资源跨域访问的几种解决方案本文分享自华为云社区<Web安全和浏览器跨域访问>,原文作者:kg-follower . ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...

《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》

《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》相关推荐

最新文章

热门文章