React.js获取服务器文件并在浏览器展示的问题求助

你遇到的错误是因为后端返回的是HTML文件内容，但前端错误地用res.json()去解析——JSON解析器遇到HTML的<!DOCTYPE>开头字符时，自然会抛出语法错误。

前端代码修改 #

核心是把解析方式从JSON改成文本，同时正确渲染HTML内容：

import { useEffect, useState } from "react";

const CardArticle = ({ cardData: cardComponent }) => {
  const [articleHtml, setArticleHtml] = useState(null);

  useEffect(() => {
    fetch("http://localhost:8000/article", {
      method: "post",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ fileName: "cardArticle.html" }),
    })
    // 把res.json()改成res.text()，获取HTML文本内容
    .then((res) => res.text())
    .then((html) => setArticleHtml(html))
    // 修正catch的写法，要传递函数
    .catch(err => console.error("加载失败:", err));
  }, []);

  if (articleHtml === null) return <div>加载中...</div>;

  // 使用dangerouslySetInnerHTML渲染HTML内容
  return (
    <div 
      dangerouslySetInnerHTML={{ __html: articleHtml }}
    >
      <div>hello it's working</div>
    </div>
  );
};

export default CardArticle;

后端代码优化 #

确保文件路径正确，同时处理文件不存在的情况：

const express = require('express');
const path = require('path'); // 必须导入path模块
const app = express();

app.use(express.json()); // 要解析JSON格式的请求体，否则req.body会是undefined

app.post("/article", (req, res) => {
  try {
    const { fileName } = req.body;
    if (!fileName) {
      return res.status(400).json({ error: "文件名不能为空" });
    }

    const filePath = path.join(__dirname, fileName);
    // 监听sendFile的错误，处理文件不存在的情况
    res.sendFile(filePath, (err) => {
      if (err) {
        res.status(404).json({ error: "文件不存在" });
      }
    });
  } catch (err) {
    res.status(500).json({ error: "服务器内部错误" });
  }
});

app.listen(8000, () => console.log("服务器运行在8000端口"));

• dangerouslySetInnerHTML是React中渲染HTML内容的唯一方式，命名里的"dangerously"是提醒你要确保内容是可信的，避免XSS攻击。
• 后端必须添加app.use(express.json())，否则无法解析前端发送的JSON请求体，req.body.fileName会是undefined。
• 用path.join拼接路径时，不要多加斜杠，__dirname已经是绝对路径，直接拼文件名即可。

内容的提问来源于stack exchange，提问作者SHERAWAT LOKESH