读取文件然后在客户端显示答案

【问题标题】：read a file then display in on client-side读取文件然后在客户端显示
【发布时间】：2021-07-21 15:17:59
【问题描述】：

我试图显示从客户端 HTML 上的文件中读取的文本。但是当我使用 require 'fs' 时，由于安全问题，它不起作用。有没有办法使用 fs 读取存储在服务器上的文件，然后在客户端显示它。下面附上了我正在尝试做的粗略草图，但它不起作用，因为我收到错误require is not defined。提前感谢任何帮助。

const fs = require('fs')
const data = fs.readFileSync('filePath', 'utf-8')

<p id="insertHere" style="color: white;"></p>

<script> document.getElementById("insertHere").innerHTML = data;</script>

【问题讨论】：

require is not defined 请阅读这些答案。现在你说，“但是当我使用 require 'fs' 时，由于安全问题，它不起作用。” 你在谈论什么安全问题？
由于安全问题，您无法在 js 中从客户端读取和写入文件，因为它可以变得更清晰。 @NotABot

标签： javascript html

【解决方案1】：

在网络浏览器中运行的 JavaScript 无法访问服务器上的文件系统。

想象一下，如果您可以在使用网上银行时打开浏览器的开发人员工具，然后开始从银行硬盘中读取文件！

如果你想从服务器获取文件到客户端 JS，你需要在双方都做一些事情。

在服务器上您需要通过 HTTP(S) 使文件可用。这可以像将文件放在 Web 服务器的 DocumentRoot 下一样简单。

在客户端您需要发出 HTTP 请求。您可以使用fetch API、XMLHttpRequest API 或包装其中之一的库（例如Axios）来做到这一点。

【讨论】：