如何用JavaScript在浏览器新标签页打开本地文件路径？遇加载限制错误

浏览器的同源安全策略会阻止HTTP/HTTPS协议加载的网页直接访问file://协议的本地资源，这就是你看到"Not allowed to load local resource"错误的原因。以下是几种可行的解决方法：

方法1：通过Web服务器的HTTP URL访问（推荐） #

你的PDF文件已经在/var/www/html/proj/目录下，这本身就是Apache/Nginx这类Web服务器的默认可访问根目录，直接用HTTP协议路径访问即可：

• 前端代码修改为：

  // 相对路径（适配域名变化，推荐使用）
  window.open('/proj/proj.pdf', '_blank');
  // 或者完整HTTP URL
  window.open('http://localhost/proj/proj.pdf', '_blank');
  

这种方式完全符合浏览器安全策略，是生产环境的标准做法。

方法2：临时调整浏览器安全参数（仅用于本地开发测试） #

如果不需要Web服务器，仅做本地调试，可以修改浏览器配置允许file://跨域访问，但不推荐日常浏览时使用，会降低浏览器安全性：

• Chrome/Edge：关闭浏览器后，在启动参数中添加--allow-file-access-from-files。比如Linux终端执行：

  google-chrome --allow-file-access-from-files
  

  Windows下右键浏览器快捷方式，在"目标"栏末尾添加该参数（注意和原有路径间加空格）。
• Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将其值改为false。

方法3：通过服务器端接口转发文件 #

如果需要对文件访问做权限控制，或者文件不在Web服务器根目录，可以通过后端接口读取本地文件并返回给前端：
比如用PHP写一个简单接口（保存为get-pdf.php放在/var/www/html/下）：

<?php
$filePath = '/var/www/html/proj/proj.pdf';
if (file_exists($filePath)) {
    header('Content-Type: application/pdf');
    header('Content-Disposition: inline; filename="proj.pdf"');
    readfile($filePath);
    exit;
} else {
    header("HTTP/1.0 404 Not Found");
    echo "File not found";
}
?>

前端代码改为：

window.open('/get-pdf.php', '_blank');

内容的提问来源于stack exchange，提问作者Jignesh Gohil