本来写了个前端手机网页版，并很快运用到后端。但是由于前端需要单独打包作为模板示范，所以打算写个 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 的标准格式
于是出现如下一幕：

比如一个音乐网站，有些人会耍些小聪明，如下图所示通过审核元素的方式获取音频链接。

理论上只要是个用户都可以做到，只要有个电脑和浏览器。

那么如何做到，用浏览器单独访问时不被解析呢？（如下图所示）

又如何做到，防止在其他网页的播放器上悄悄引用自己服务器的地址进行流量盗链呢？（如下图所示）

以上示范通过第三方的网站播放器悄悄引用自己服务器的资源地址其实是有一部分效果的，那就是会播报14秒的语音提醒用户进入了盗版网页，该网页试图窃取资源，并给出了正确的官网地址。因为14秒和第一张截图的“未白镇” 1:59 秒 有很大的不同了，细心的你可以看出区别。

那么实际上，上面的防盗链已实行了双防盗策略，对于想通过浏览器直接访问的人来说，会显示图片防盗链。对于想通过第三方网站播放器引用资源的人来说，会加载14秒的语音防盗播报。

毫无疑问，这个时候可以牺牲点服务器性能，采用后端控制资源访问，隐藏真实地址。然而做防盗链有个非常重要要解决的问题就是，采用后端控制资源访问，那么header头信息将不再由服务器自动处理，而是交给后端进行处理。很明显会出现一系列的大问题。具体请看服务器缓存篇（用于解决动态资源访问导致的缓存失效问题）：
https://www.cwmoo.cn/blog/109/

【实现思路】
一般的防盗链都可以通过 session 解决第一步问题，就是需要先访问某个页面，这个session会被激活，才可以访问调取资源的接口。session的位置一般在开头，那么，图片形式展示的防盗链其实就可以通过这种方式，进行判断。具体就是输出一个img标签罢了。

那么实际上一般情况设置后，就不可能会出现二般情况了，所以，只要没访问主站，还真就无法调取任何资源。但是呢，这么想往往是异想天开，忽略了某些因素。
比如用户本身就是主站的粉丝呢？假如有一个竞争对手他也盗用自己站点的资源。那么，这个时候用户可能会先开主站激活session，session已激活，再去别的网站听，那岂不是就没有资源防盗了呢？（谁特么会这么干？谁能保证哪个用户在访问别的网站之前必须得先访问自己的主站？那盗资源的网站不是就露馅了么？）
只能说问这个问题的还年轻，iframe了解不？我哪怕不设置宽高不让iframe显示出来，只需要iframe有设置地址，用户访问时自然就会访问iframe中的网页，自然就激活了主站session，那盗你不是很轻松？

那么二般思路就是在session的后面，当程序将资源的地址组装完毕且路径正确之后，对上一级页面进行判断。是否是通过别的页面重定向到这个资源，如果不是，则直接输出图片展示的防盗链形式提醒，因为这个可以确定用户是通过接口工具或者浏览器直接访问。那如果是别的页面重定向的呢？

再进行判断，这些判断中用户可以获取上一级页面的地址是否是我们自己的主站地址，如果不是，自然就是第三方的网站，那这时就可以将14秒的音频送给他。所以可以通过是否重定向以及重定向之前的地址是否是主站地址进行判断。有人说可以更改header头信息啊，对啊，但是这个针对用户来讲已经足够了。如果再往上，就要有接口工具修改header信息了？哪个用户会访问一个资源这么做？只有有意盗取资源的人会这么做，然并卵。因为这类人只能在自己的电脑上得到测试结果，那也无法改变其他用户的访问意向。

在 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';
}