HTML无法直接读取本地txt文件，因浏览器安全机制禁止file://协议下fetch；需本地服务器支持同源fetch或用FileReader通过由用户主动选择文件读取。
HTML 本身不能直接读取本地 txt 文件内容——这是浏览器安全机制决定的，不是写法不对，是根本做不到。
为什么 fetch() 本地文件会失败（CORS / file:// 协议限制）
你双击打开 HTML 文件，地址栏显示的是 file:///xxx/index.html，这时用 fetch('data.txt') 会报错：net::ERR_FAILED 或 Cross-Origin Request Blocked。因为浏览器禁止从 file:// 协议发起跨源请求，而本地文件系统不被视为“同源”。
- 开发时必须起一个本地服务器（哪怕最简单的），让页面运行在
http://localhost:8080这类地址下 -
fetch()路径是相对 URL，不是文件系统路径；./data.txt指的是服务器根目录下的data.txt，不是你电脑桌面那个 - Chrome 禁用
--disable-web-security启动已不推荐，且新版会忽略该参数
用 fetch() 读取同源 txt 的最小可行写法
前提是页面已托管在本地服务（如 python3 -m http.server 或 VS Code Live Server 插件）。
- 确保
data.txt和 HTML 在同一目录，或路径正确（比如./assets/info.txt） - 记得处理 Promise 和异常，否则出错时页面静默失败
-
response.text()返回的是字符串，不是自动解析成数组或 JSON，要自己.split('\n')或JSON.parse()（如果内容是 JSON 格式）
fetch('data.txt')
.then(r => r.text())
.then(text => {
document.getElementById('output').textContent = text;
})
.catch(err => console.error('读取失败:', err));
想让用户上传 txt 再读取？用 <input type="file">
绕过服务端、纯前端读本地文件的唯一合规方式，就是让用户主动选择文件。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
input事件，不能靠点击按钮后调click()触发 —— 多数浏览器会拦截非用户手势触发的文件选择 - 用
FileReader读取，不是fetch；readAsText()支持指定编码（如'UTF-8'），中文乱码基本都出在这儿 - 注意：
FileList是类数组，得取files[0]，别直接传files
<input type="file" accept=".txt" id="fileInput">
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
document.getElementById('output').textContent = reader.result;
};
reader.readAsText(file, 'UTF-8');
});
</script>
真正卡住人的地方从来不是语法，而是协议限制和编码隐含假设——file:// 下死活读不出、中文变问号、点了按钮没反应，八成栽在这三处。
