[开发工具]如何实现html静态文件通过本地文件获取数据

有一个这样的需求，并且最后要求是可点击的html静态文件，不要链接数据库

由于前端接触不多，最开始就尝试了一下之前比较熟练的ajax

        var data = 0;
        $.ajax({
            url: '../sys.log',
            type: 'GET',
            data: data,
            async:true,    //是否异步
            dataType:"jsonp",    //跨域json请求一定是jsonp
            // jsonp: "callbackparam",    //跨域请求的参数名，默认是callback
            //jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
            // data:{"query":"civilnews"},    //请求参数
            // headers:{//请求头
            //     'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            // },
            headers:{//请求头
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            },
            success :function (data) {//这里的请求发送到服务器（控制器里
                // alert(data);
                var str=new String();
                var arr=new Array();
                str=data;
                //可以用字符或字符串分割
                arr=str.split('\n');
                var li_str = "";
                for(var i=0;i<arr.length;i++)
                {
                    // alert(i+arr[i]);
                    li_str = li_str+"<li class=\"layui-timeline-item\">\n" +
                        "                              <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                        "                              <div class=\"layui-timeline-content layui-text\">\n" +
                        "                                <h3 class=\"layui-timeline-title\">2019-03-3"+i+"</h3>\n" +
                        "                                <p>\n" +
                        arr[i]+
                        "\n" +
                        "                                </p>\n" +
                        "                              </div>\n" +
                        "                            </li>";
                }
                $("#ul_for").html(li_str);
            },
        });

然后发现从idea中直接打开可以，但是并不能通过静态文件读取到数据。
以为在idea中会自动把请求的地址变为http://localhost:63342/templates/system/log.html?
然而通过本地打开时是
file:///D:/1waibao/java-shop/shop-main/src/main/resources/templates/system/log.html
错误信息Access to XMLHttpRequest at 啊 from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
由于通过链接直接访问本地文件被浏览器识别为十分危险的行为，好像就禁用了（火狐没有禁用），所以不通过服务器的话是没法用ajax访问的。

于是使用jsonp

    <script>
        function dataJson(data) {
            console.log(data);
            //
            // alert(data.data[0].content);
            // alert(data.data[1].content);
            // alert(data.data[2].content);
            //
                    var li_str = "";

            for(var i=0;i<data.data.length;i++)
                {
                    // alert(i+arr[i]);
                    li_str = li_str+"<li class=\"layui-timeline-item\">\n" +
                        "                              <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                        "                              <div class=\"layui-timeline-content layui-text\">\n" +
                        "                                <h3 class=\"layui-timeline-title\">"+data.data[i].date+"</h3>\n" +
                        "                                <p>\n" +
                        data.data[i].content+
                        "\n" +
                        "                                </p>\n" +
                        "                              </div>\n" +
                        "                            </li>";
                }
                $("#ul_for").html(li_str);
        }
    </script>
    <!-- 引入要放在后面 -->
    <script type="text/javascript" src="../sys.log?cb=dataJson"></script>

//文件数据以及格式
dataJson({
  "status": "success",
  "data": [
    {
    "date": "2015-01-04",
    "content": "hello world"
    },
    {
      "date": "2015-01-11",
      "content": "这是sys.log的第二行"
    },
    {
      "date": "2015-01-18",
      "content": "这是sys.log的第三行"
    }
  ]
})

成功获取

最关键的参考代码通过Ajax读取本地json文件，提示跨域的原因和解决方法