关于使用 jsonp 读取本地 json 文件

本来写了个前端手机网页版,并很快运用到后端。但是由于前端需要单独打包作为模板示范,所以打算写个 json 文件作为配置文件模拟服务器数据进行加载。
json 原本如下:

{
    "music_list":[{
            0: [{
                    "name": "简单爱",
                    "singer": "周杰伦",
                    "src": "xxxx"
            }],
            1: [{
                    "name": "Lemon",
                    "singer": "米津玄師",
                    "src": "xxxx"
            }]
    }]
}

当然,使用jQuery的 $.getJSON 得到的结论如下:
请求失败.png

很明显,这是一个跨域的问题,如果要解决,就要将其放到服务器里面吗?比如查看者需要在本地搭建一个 localhost,用这种方式启动,我还不如直接将后端打包得了。于是我查到了一个非正式的协议 jsonp,原理完全和ajax不一样,但jquery 也封装了进去。

不过,这里可以参考jsonp的方法做一些简单的处理。操作如下:
functino_callback.png
先写一个function 作为 callback 函数。

引入js.png
type里面指定类型为 js,问好后面加个 callback 可简写为 cb,并填写对应的函数名。

20190410003833.png
然后 json 文件里面写成js的函数形式 也就是这个function名要与上面的一致,里面再加上 json 的标准格式
于是出现如下一幕:
打印结果.png