如何让Chrome仅对指定文件夹启用--allow-file-access-from-files参数？

你遇到的这个问题很典型——Chrome的安全策略默认会限制file://协议下跨目录的资源访问，而全局启用--allow-file-access-from-files确实会带来不必要的安全风险。下面是几个更安全的针对性解决方案：

方案1：创建专用Chrome快捷方式，仅对目标目录启用权限 #

这个方法通过独立的Chrome配置和启动参数，让权限只作用于你的Web应用，完全不影响日常浏览：

1. 找到Chrome的快捷方式（比如桌面或开始菜单中的），右键复制一个副本，作为这个Web应用的专属启动入口。

2. 右键副本选择属性，在目标输入框的末尾（注意和原有路径之间留一个空格）添加以下参数：

   --allow-file-access-from-files --user-data-dir="D:\Chrome-WebApp-Profile" --app="file:///D:/your-project-path/dist/index.html"
   

   参数说明：

   • --allow-file-access-from-files：开启本地文件跨目录访问权限
   • --user-data-dir：指定独立的用户配置目录，避免和你日常使用的Chrome配置冲突，确保权限仅在这个环境下生效
   • --app：让Chrome以应用窗口模式打开你的Web应用，体验更流畅，同时直接定位到你的index.html

   记得把路径替换成你实际的dist目录绝对路径（Windows系统可以用正斜杠，或者把反斜杠改成双反斜杠）。

3. 保存设置后，双击这个快捷方式就能正常加载/assets下的所有资源了，日常使用的Chrome不受任何影响。

方案2：修改资源引用路径（无需调整Chrome配置） #

如果你不想修改Chrome的启动参数，可以尝试把index.html里所有指向assets目录的相对路径改成本地绝对文件路径：

比如原来的引用：

<img src="./assets/icons/add.svg" alt="Add">

修改为：

<img src="file:///D:/your-project-path/dist/assets/icons/add.svg" alt="Add">

这个方法的缺点是，如果你的dist目录移动位置，所有资源路径都需要重新修改，灵活性比较差。

方案3：用轻量本地HTTP服务器替代file://（最安全无风险） #

虽然你倾向于用file://，但如果可以接受本地HTTP服务，这是最稳妥的方案：

• 比如用Node.js的http-server：先通过npm install -g http-server安装，然后进入你的/dist目录，运行http-server命令，之后在Chrome访问http://localhost:8080即可，所有资源都能正常加载，完全不需要修改Chrome的安全设置。

内容的提问来源于stack exchange，提问作者bartosz.baczek