【js】解决读取文件源内容总是得到默认index.html

在项目开发中，资源的获取都可以通过网络，所以获取文件内容，只需要将文件地址作为请求发送即可

读取文件源内容

	const path = '资源地址（必须是绝对路径）'

      fetch(path)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.text()
        })
        .then((data) => {
          console.log('data===', data)
        })
        .catch((error) => {
          console.error(
            'There has been a problem with your fetch operation: ',
            error,
          )
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

问题

请求发送成功，但是获取的内容是默认的index.html

思考

1. 为什么返回的不是请求的文件？
   请求文件资源不存在，服务器未找到匹配的文件，只能返回该项目的默认index.html
2. 找不到文件的原因？路径错误？文件名有误？
   必须是绝对路径

我们一般项目里都会通过webpack或vite设置路径别名@，便捷开发。所以平时获取图片，导入文件都会使用别名@。此时你也是否在发送请求时使用别名@呢，问题的根据原就在此

使用别名开发时是webpack和vite等工具提供的，在dom和import导入时会自动解析
但此时我们想要将路径作为地址发送网络请求，fetch API 是不知道如何处理这个别名的，它只能发送 HTTP 请求到服务器。

解决

当使用别名时，请求地址中@别名未被解析，所以服务器找不到@目录下的文件，返回默认的index.html

使用绝对路径之后再次请求

得到正确的文件内容