fetch读取同源txt需http服务（如python -m http.server），避免file://跨域；路径须同域，响应用res.text()解析；显示时用textcontent防xss，pre+code保格式。
用 fetch 读取同源 txt 文件最可靠
浏览器不能直接用 file:// 协议加载本地 txt（会触发 CORS 或跨域拦截），必须走 HTTP 服务。开发时起个轻量服务就行，比如 Python 的 python -m http.server 8000，把 txt 放在根目录，再用 fetch('data.txt') 拿内容。
常见错误现象：net::ERR_FILE_NOT_FOUND（路径错）、No 'access-Control-Allow-Origin' header（直接双击 html）、TypeError: Failed to fetch（路径 404 或跨域）。
- txt 必须和 HTML 同域（同协议、同主机、同端口），否则
fetch拒绝响应 -
fetch返回 promise，记得用.then(res => res.text())或await res.text()解析文本 - 不要用
XMLHttpRequest手动写，现代项目没理由绕过fetch
显示 txt 内容时别用 innerHTML 直接插入
txt 里如果有 、<code>>、& 这类字符，innerHTML = text 会误解析成 HTML 标签，轻则乱码，重则执行脚本（如果 txt 可控性差）。应该转义后塞进 textContent，或用 pre + white-space: pre-wrap 保格式。
使用场景：日志查看、配置文件预览、纯文本说明文档。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：
el.textContent = text—— 完全忽略 HTML 语法 - 要保留换行缩进：
<pre class="brush:php;toolbar:false;"><code></code></pre>，然后codeEl.textContent = text - 千万别写
el.innerHTML = text.replace(/&/g, '&').replace(/, '，轮子早有了，用 <code>textContent就行
Chrome/Firefox 本地开发时的 file:// 绕过方案（仅限调试）
真不想起服务？可以临时绕过，但仅限本地验证逻辑，不能用于交付或测试环境。
Windows/macOS 下启动 Chrome 时加参数：chrome --user-data-dir=/tmp/chrome-test --disable-web-security；Firefox 需改 about:config 中 security.fileuri.strict_origin_policy 为 false。
- 这些操作禁用关键安全策略，关掉所有其他 Chrome 窗口再试，避免污染主配置
- 一旦加了
--disable-web-security，所有页面都失去同源限制，fetch能读任意本地文件（包括系统敏感路径） - 打包或上线前必须切回标准模式，否则用户打不开
后端吐 txt 时注意 Content-Type 响应头
如果 txt 是后端生成的（比如 PHP/Node.js 输出），响应头没设对，浏览器可能当二进制下载，或用错误编码解析中文。
正确做法是返回 Content-Type: text/plain; charset=utf-8，且 txt 文件本身保存为 UTF-8（无 BOM）。
- Node.js Express 示例：
res.set('Content-Type', 'text/plain; charset=utf-8').send(text) - PHP 示例：
header('Content-Type: text/plain; charset=utf-8');，再echo $content - 如果漏了
charset=utf-8，中文可能显示成 ，尤其 Windows 记事本存的 txt 默认 GBK
路径、编码、同源——这三个点卡住的人最多。尤其是把 txt 放错目录层级，或者用编辑器另存时没选 UTF-8，问题看起来像代码错了，其实只是文件没放对位置或编码不对。