js读取json文件的一个乌龙
起因
编写一个显示数据的静态页面，也就是俗称的index.html页面，页面的数据则有同目录下的json文件提供。
乌龙
吭哧吭哧的把页面写完和把json文件创建完成后，开始测试。
index.html
DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>参数表title><link rel="stylesheet" href="static/bootstrap.min.css"/>
head>
<body>
<div class="row"><div class="col-md-8 col-md-offset-2 well well-lg"><div class="page-header"><h1>参数记录 <small>V.0.0.1small>h1>div><table class="table table-bordered table-hover"><thead><th>#th><th>名称th><th>数值th><th>备注th>thead><tbody id="data">tbody>table>div>
div>
<script type="text/javascript" src="static/jquery.min.js">script>
<script>$(document).ready(function () {$.getJSON("static/index.json", function (data) {$('#data').empty();$.each(data, function (index, value) {let output = ''+ '' + (index + 1) + ' '+ '' + value["name"] + ' '+ '' + value["val"] + ' '+ '' + value["bz"] + ' '+ ' ';$('#data').append(output);});});});
script>
body>
html>
index.json文件
[{"name": "upload","val": "D:\\\\upload\\\\","bz": "文件下载上传地址"},{"name": "tel","val": "12345678911","bz": "电话"}
]
在webStorm编译器中运行没有问题
原本到这里事情都已经大功告成了，然后笔者突然灵光一闪，切换到项目所在目录尝试一下。
点击页面后，浏览器控制台出现以下报错：
这张图直接让笔者陷入沉思，自此一个下午都陷入了这个乌龙的旋涡中。
实际上，当笔者把项目放到tomcat上运行访问时，则就没有了这个问题。
因为json文件和页面代码在同一个服务器下，所以不存在跨域的问题。同时如何笔者当时反向的思考一下，其实也可以避免陷入死胡同中，如果浏览器允许本地的一个页面读取当前机器下的所有json文件，那么则表示，只需要发送给用户一个页面，用户点击后，就可以获取用户所使用的机器的所有文件信息，漏洞太过明显，自然是不可能的。
通过这次乌龙，笔者明白一个问题，正反两个角度的去思考，可以避免自己钻牛角尖。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！