Chrome读取本地文本文件遇跨域问题：如何请求权限实现读取

我太懂你碰到的这个坑了！Chrome这类现代浏览器出于安全沙箱机制的限制，直接用XMLHttpRequest或fetch访问file://协议下的本地文件时，必然会触发跨域错误——毕竟浏览器不能随便让网页读取你的本地文件系统，这会带来严重的安全风险。

要合法读取本地文件，正确的姿势是利用HTML5的File API，通过让用户主动选择文件的方式获取读取权限，完全符合浏览器的安全规范。下面是一个完整的可直接运行的HTML示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地文件读取示例</title>
    <style>
        .container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        #fileContent {
            margin-top: 1rem;
            padding: 1rem;
            border: 1px solid #eee;
            min-height: 200px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>选择本地文本文件读取</h2>
        <!-- 文件选择控件，可限制允许选择的文件类型 -->
        <input type="file" id="fileInput" accept=".txt,.md,.json" />
        <!-- 用于展示读取到的文件内容 -->
        <div id="fileContent">文件内容会显示在这里...</div>
    </div>

    <script>
        // 获取页面DOM元素
        const fileInput = document.getElementById('fileInput');
        const fileContent = document.getElementById('fileContent');

        // 监听文件选择事件
        fileInput.addEventListener('change', (e) => {
            // 获取用户选中的第一个文件
            const selectedFile = e.target.files[0];
            if (!selectedFile) return;

            // 创建FileReader实例处理文件读取
            const reader = new FileReader();

            // 文件读取完成后的回调
            reader.onload = (event) => {
                // 将读取到的文本内容展示到页面
                fileContent.textContent = event.target.result;
            };

            // 处理文件读取错误的情况
            reader.onerror = () => {
                fileContent.textContent = `读取文件出错: ${reader.error.message}`;
            };

            // 以纯文本格式读取文件
            reader.readAsText(selectedFile);
        });
    </script>
</body>
</html>

这个方案的核心特点： #

• 完全遵循浏览器安全规则，不需要修改浏览器启动参数（比如--allow-file-access-from-files这种不安全的操作）
• 用户主动选择文件，相当于主动授予读取权限，不会触发跨域或安全警告
• 支持所有现代浏览器（Chrome、Firefox、Edge等）
• 可以通过accept属性精准限制可选择的文件类型

你只需要把这段代码保存为HTML文件，直接在浏览器中打开，点击文件选择框选中本地文本文件，就能看到内容展示在页面上了，完全不会有跨域问题。

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