JavaScript Fetch无法展示HTML页面文本内容，该用Fetch还是FileReader？

数据老陈

2026-8-19

问题解答

1. fetch是否适合这个场景？FileReader呢？

fetch完全适合读取同目录下的静态文本文件，这正是它的典型使用场景之一。而FileReader不适合这个需求——它的作用是处理用户通过文件选择器（比如<input type="file">）上传到浏览器的本地文件，不是用来请求服务器上的静态资源的。

2. 你的代码为什么不工作？

核心错误是添加了{ mode: 'no-cors' }选项：

当使用no-cors模式时，fetch返回的是不透明响应（opaque response），这种响应无法读取任何内容（包括response.text()），浏览器会限制你访问响应体。
同目录下的文件和HTML属于同源，根本不需要no-cors模式，这个选项反而破坏了正常的响应读取。

另外，你拼接文件路径的写法可以简化，直接用./a.txt就能指向同目录的文件，不需要手动截取location.href。

3. 修正后的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" >
<style type="text/css">
</style>
<script type="text/javascript" defer>     
async function getTextFile1() {
  try {
    // 直接用相对路径，去掉no-cors模式
    const response = await fetch('./a.txt'); 
    // 先检查响应是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const fileText = await response.text();
    
    const tagElement = document.getElementById("about_layer");
    tagElement.innerText = fileText; 
  } catch (error) {
    console.error('读取文件出错：', error);
  }
}

window.onload = getTextFile1;
</script> 
</head>
<body>
<div>should be placed here</div>
<div id="about_layer"></div>
</body>
</html>