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

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

当然，使用jQuery的 $.getJSON 得到的结论如下：

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

不过，这里可以参考jsonp的方法做一些简单的处理。操作如下：

先写一个function 作为 callback 函数。

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

然后 json 文件里面写成js的函数形式 也就是这个function名要与上面的一致，里面再加上 json 的标准格式
于是出现如下一幕：

在 function 末尾加上 exit(0);可以使之生效

header("Accept-Ranges: bytes");  //请求范围的度量单位
header("Content-Disposition: filename=" . $file_name );  //文件名
header("Cache-Control: public, max-age=31536000");   //控制缓存
header("Content-Type: audio/mpeg");   //类型
header('Content-Length: ' . $file_size);   //文件大小
header('Last-Modified: '.gmdate('D, d M Y H:i:s',time())." GMT");   //上次修改时间
header('Expires: '.gmdate('D, d M Y H:i:s', time() + 3600*24*60)." GMT");   //到期时间
header("Pragma: Pragma");   //使用缓存

有关浏览器缓存的应用请查看

假设我们要利用后端读取音频资源并输出到浏览器（可能做防盗链用）

    public function get_music(){
        ......

        $file_source = 'xxxx';  //音频文件的资源地址

        //检查文件是否存在
        if (! file_exists ($file_source)) {
            header('HTTP/1.1 404 NOT FOUND');
        } else {
            //获取文件Etag相同则返回304并结束运行本接口，使客户端读取缓存，否则附加Etag值返回客户端浏览器进行记录
            $Etag = md5_file($file_source); //获取文件md5，其实文件md5可用作Etag作为记录，校检文件是否改变。
            if(array_key_exists('HTTP_IF_NONE_MATCH', $_SERVER) and $_SERVER['HTTP_IF_NONE_MATCH'] == $Etag){
                header("HTTP/1.1 304 Not Modified");  //返回304
                exit();  //结束运行
            } else {
                header("Etag:" . $Etag);  //标记Etag
            }

            //以只读和二进制模式打开文件
            $file = fopen ( $file_source, "rb" );
            //文件大小
            $file_size = filesize($file_source);
            //请求范围的度量单位
            header("Accept-Ranges: bytes" );
            //文件名
            header("Content-Disposition: filename=" . $file_name );
            //缓存控制
            header("Cache-Control: public, max-age=31536000");
            //返回资源类型
            header("Content-Type: audio/mpeg");
            //文件真实大小
            header('Content-Length: ' . $file_size);
            //上次修改时间
            header('Last-Modified: '.gmdate('D, d M Y H:i:s',time())." GMT");
            //到期时间
            header('Expires: '.gmdate('D, d M Y H:i:s', time() + 3600*24*60)." GMT");
            //启用缓存
            header("Pragma: Pragma");

            //读取文件内容并直接输出到浏览器
            echo fread ( $file, filesize ( $file_source ) );
            fclose ($file);
            //exit(0);    //如果你在TP5框架中使用导致Content-Type无法更改，请加上此处让header生效
        }
    }

//根据网页id，取id里面的内容

function copyUrl2(id){
    var Url2=document.getElementById(id).innerText;
    var oInput = document.createElement('input');
    oInput.value = Url2;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display='none';
}