离线Web应用通过AJAX读取本地文件遭CORS拦截，如何绕过该限制？

方案1：使用File API让用户手动选择文件 #

这是浏览器原生支持且安全合规的方式，无需修改浏览器设置。通过<input type="file">让用户主动选择本地文件，再用FileReader读取内容：

<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(event) {
      const content = event.target.result;
      console.log(content); // 此处处理文件内容
    };
    reader.readAsText(file);
  }
});
</script>

所有主流浏览器都支持该方式，完全适配浏览器安全策略。

方案2：修改浏览器启动参数（仅用于开发调试） #

如果是开发阶段需要直接读取本地文件，可通过浏览器启动参数绕过CORS限制，但严禁用于生产环境（会降低浏览器安全性）：

• Chromium/Chrome：在快捷方式目标栏末尾添加 --allow-file-access-from-files（注意参数前有空格），启动后即可用fetch("C:/reading.txt")读取本地文件。
• Firefox：在地址栏输入about:config，找到security.fileuri.strict_origin_policy，将其值改为false。

方案3：打包成桌面应用（生产环境推荐） #

若要制作正式离线桌面应用，可使用Electron、NW.js这类框架。它们基于浏览器内核，同时允许直接访问本地文件系统，不受浏览器CORS限制。比如用Electron结合Node.js的fs模块读取文件：

const fs = require('fs');
fs.readFile('C:/reading.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

这种方式既保留Web开发的便捷性，又能自由访问本地资源，适合离线桌面应用的生产场景。

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