Chrome无法加载本地资源问题及PHP/jQuery文件管理器修改请求

错误原因 #

当前脚本直接将服务器物理文件路径（如/var/www/html/files/xxx.txt）作为<a>标签的href属性，浏览器出于安全限制，不允许网页直接加载本地/服务器物理路径的资源，必须通过HTTP请求访问。

解决方案 #

1. 创建下载中转脚本 download.php #

负责处理文件下载请求，同时防止目录遍历攻击：

<?php
// 设置允许下载的根目录（根据你的实际路径修改，比如网站根目录下的files文件夹）
$allowedRoot = __DIR__ . '/files';

// 获取前端传递的文件路径
$filePath = isset($_GET['path']) ? $_GET['path'] : '';
$filePath = realpath($filePath);

// 验证文件合法性：必须在允许的根目录内、存在且不是文件夹
if (!$filePath || strpos($filePath, $allowedRoot) !== 0 || !file_exists($filePath) || is_dir($filePath)) {
    http_response_code(403);
    die("Access denied or file not found.");
}

// 设置下载响应头
$fileName = basename($filePath);
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="' . $fileName . '"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($filePath));

// 输出文件内容
readfile($filePath);
exit;
?>

2. 修改 scan.php #

补充函数声明，返回网站根目录相对路径（供download.php解析）：

<?php
// 定义扫描的根目录（根据实际路径修改）
$rootDir = __DIR__ . '/files';

// 递归扫描目录函数
function scan($dir) {
    $files = array();
    if(file_exists($dir)){
        foreach(scandir($dir) as $f) {
            if(!$f || $f[0] == '.') {
                continue; // 忽略隐藏文件
            }
            $fullPath = $dir . '/' . $f;
            // 转换为网站根目录相对路径
            $relativePath = str_replace(__DIR__ . '/', '', $fullPath);
            
            if(is_dir($fullPath)) {
                $files[] = array(
                    "name" => $f,
                    "type" => "folder",
                    "path" => $relativePath,
                    "items" => scan($fullPath)
                );
            }
            else {
                $files[] = array(
                    "name" => $f,
                    "type" => "file",
                    "path" => $relativePath,
                    "size" => filesize($fullPath)
                );
            }
        }
    }
    return $files;
}

// 输出JSON格式结果
header('Content-Type: application/json');
echo json_encode(scan($rootDir));
?>

3. 修改 script.js #

在渲染文件时添加下载按钮，移除原错误的物理路径链接：
找到render函数中渲染文件的代码块，替换为：

if(scannedFiles.length) {
    scannedFiles.forEach(function(f) {
        var fileSize = bytesToSize(f.size),
            name = escapeHTML(f.name),
            fileType = name.split('.'),
            icon = '<span class="icon file"></span>';
        fileType = fileType[fileType.length-1];
        icon = '<span class="icon file f-'+fileType+'">.'+fileType+'</span>';
        
        // 生成下载按钮
        var downloadBtn = '<a href="download.php?path=' + encodeURIComponent(f.path) + '" class="download-btn" title="下载文件">下载</a>';
        
        // 构建文件项HTML（移除原错误的a标签，改用div展示信息）
        var file = $('<li class="files">' +
            '<div class="file-info">' +
                icon + '<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span>' +
            '</div>' +
            downloadBtn +
        '</li>');
        file.appendTo(fileList);
    });
}

4. 可选：添加下载按钮样式（styles.css） #

.files {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.download-btn {
    background-color: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.download-btn:hover {
    background-color: #0056b3;
}

内容的提问来源于stack exchange，提问作者Oswald Edward