谷歌浏览器Web_FS文件系统访问开启与本地编辑教程

要在前端网页中直接读写本地文件，听上去很理想，但进入实践后会发现处处是坑。Chrome出于安全考量默认将这类API完全封锁，若不主动解除限制，点击保存按钮要么静默失败，要么直接抛出“Permission denied”错误。根据多年实战经验，要顺利调用showOpenFilePicker等文件系统API，需从三个层级依次打通权限壁垒。

激活Chrome实验性文件系统访问开关

这一步是整个权限链的根基。若未开启该开关，后续所有授权操作均会卡死——权限弹窗不会弹出，API调用直接返回undefined或彻底被拒绝。

1、在Chrome地址栏输入 chrome://flags/#file-system-access 并回车。

2、在页面顶部的搜索框中输入 file system access，即可快速定位到“File System Access API”配置项。

3、将其右侧的下拉菜单从 Default 切换为 Enabled。

4、点击右下角的 Relaunch 按钮重启浏览器——不重启则设置不生效。

手动为当前网页授予本地文件系统权限

Chrome基于协议、域名与端口进行细粒度权限管理，localhost:3000 与 file:///C:/test/index.html 虽同属本地环境，却属于两个完全独立的权限域，必须分别配置。

方法一：适用于 http://localhost 或 https 站点

1、确保已启用上一节的实验性开关并重启过浏览器。

2、打开目标网页（例如 http://localhost:3000/editor.html）。

3、点击地址栏左侧锁形图标 → 选择“站点设置” → 滚动至页面底部找到 Local file system 选项。

4、将该权限设为 Allow，关闭设置页后刷新当前网页。

方法二：适用于 file:// 协议本地网页（如双击打开的HTML文件）

1、访问 chrome://settings/content/fileSystem 页面。

2、点击“添加”按钮，在弹出的对话框中输入完整路径，例如：file:///C:/my-project/（注意末尾斜杠不能少）。

3、点击“添加”，该路径下的所有HTML页面即可调用文件系统API。

启动Chrome时绕过非安全源限制（仅限开发调试）

Chrome默认将 file:// 和 http://localhost 视为非安全上下文，从而禁止调用部分API。此步骤专为本地开发环境设计，生产环境必须使用HTTPS。

第一步：关闭所有Chrome进程

按下 Ctrl+Shift+Esc 打开任务管理器，结束所有 chrome.exe 进程——漏掉任何一个后台进程都会导致参数失效。

第二步：创建专用快捷方式

右键桌面Chrome图标 → 属性 → 在“目标”末尾添加一个空格及以下完整参数（请根据实际端口号和路径替换）：

--unsafely-treat-insecure-origin-as-secure="http://localhost:3000" --user-data-dir="C:/chrome-fs-dev" --allow-file-access-from-files

第三步：启动并验证

双击该快捷方式启动新Chrome实例 → 访问 http://localhost:3000 → 打开开发者工具（F12）→ 在控制台输入 window.showOpenFilePicker，若返回函数而非 undefined，则配置成功。

来源：互联网