如何在React前端渲染Node.js（Express）返回的HTML文件

方案1：使用dangerouslySetInnerHTML直接插入HTML #

这是React中渲染原始HTML的标准方式，不会触发页面重定向问题。

步骤：

• 前端用fetch或axios请求后端接口获取HTML内容
• 将获取到的HTML字符串通过dangerouslySetInnerHTML注入到React组件中

示例代码：

import { useState, useEffect } from 'react';

function HtmlRenderer() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    fetch('/api/get-html') // 替换成你的后端接口路径
      .then(res => res.text())
      .then(html => setHtmlContent(html))
      .catch(err => console.error('获取HTML失败:', err));
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

export default HtmlRenderer;

注意：只有当你完全信任后端返回的HTML内容时才使用这个方法，避免XSS攻击。

方案2：使用iframe嵌入HTML #

如果后端返回的HTML包含独立的样式或脚本，用iframe隔离渲染会更安全，也不会影响当前页面的环境。

示例代码：

import { useState, useEffect } from 'react';

function HtmlIframeRenderer() {
  const [htmlBlob, setHtmlBlob] = useState(null);

  useEffect(() => {
    fetch('/api/get-html')
      .then(res => res.blob())
      .then(blob => setHtmlBlob(URL.createObjectURL(blob)))
      .catch(err => console.error('获取HTML失败:', err));

    return () => {
      if (htmlBlob) URL.revokeObjectURL(htmlBlob); // 清理URL，避免内存泄漏
    };
  }, []);

  return htmlBlob ? (
    <iframe 
      src={htmlBlob} 
      width="100%" 
      height="600px" 
      frameBorder="0"
      title="Embedded HTML"
    />
  ) : <div>加载中...</div>;
}

export default HtmlIframeRenderer;

方案3：修改后端路由，直接作为静态资源访问 #

如果这个HTML文件是固定的静态文件，不需要动态生成，可以直接在Express中配置静态资源目录，前端直接通过URL访问或用iframe嵌入，无需额外请求接口。

后端配置示例：

// Express 代码
const express = require('express');
const app = express();

// 配置静态资源目录，假设HTML文件放在public文件夹下
app.use(express.static('public'));

// 原来的sendFile路由可以保留，或者直接用静态资源访问
app.get('/api/get-html', (req, res) => {
  res.sendFile('path/to/your/file.html', { root: __dirname });
});

前端直接访问：

<iframe src="/your-file.html" title="Static HTML" />

为什么document.write会导致跳转？ #

document.write会重写整个文档流，当页面已经加载完成后调用它，浏览器会重新解析文档，可能触发一些环境变量的异常（比如本地开发中HTTPS的自动跳转配置），所以不推荐在React应用中使用这种方式。

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