React项目中如何在ESM环境的Axios代码里导入静态HTML？

针对你的需求，有几种可行方案，既避免了维护复杂HTML字符串的麻烦，又能适配Axios在组件树外运行的场景：

方案1：加载静态HTML文件替换页面内容 #

你可以直接通过fetch获取预编写的静态403页面内容，再替换页面body，这样就能复用包含完整样式、链接和说明的静态页面：

// Axios.jsx 中的响应拦截器配置
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 403) {
      fetch('/403.html')
        .then(res => res.text())
        .then(html => {
          document.body.innerHTML = html;
          // 可选：清除React应用的残留状态，比如卸载根组件
        });
    }
    return Promise.reject(error);
  }
);

注意：把静态403页面放在项目的公共目录（比如Create React App的public文件夹），确保能通过/403.html直接访问。这种方式会完全替换当前页面内容，适合不需要保留原有应用状态的场景。

方案2：用React组件渲染403页面（推荐） #

如果不想脱离React生态，可以编写React组件式的403页面，再在Axios拦截器中直接挂载到body：

1. 先创建ForbiddenPage.jsx组件：

// ForbiddenPage.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';

export const ForbiddenPage = () => {
  return (
    <div style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto', fontFamily: 'sans-serif' }}>
      <h1>403 无权访问</h1>
      <p>你没有权限查看该内容，请检查账号权限或返回首页。</p>
      <button onClick={() => window.location.href = '/'}>返回首页</button>
    </div>
  );
};

export const renderForbiddenPage = () => {
  document.body.innerHTML = '';
  const root = ReactDOM.createRoot(document.body);
  root.render(<ForbiddenPage />);
};

2. 在Axios.jsx中导入并调用：

// Axios.jsx
import { renderForbiddenPage } from './ForbiddenPage';

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 403) {
      renderForbiddenPage();
    }
    return Promise.reject(error);
  }
);

这种方式保留了React组件化的优势，维护起来比纯HTML字符串方便得多。

方案3：通过全局状态触发应用内的403页面（最佳实践） #

如果你的应用使用全局状态管理（如Redux、Zustand、Context），推荐完全在React组件树内处理：

1. 在全局状态中添加isForbidden状态，用于控制页面切换。
2. Axios拦截器中更新状态：

// Axios.jsx
import { setIsForbidden } from './store';

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 403) {
      setIsForbidden(true);
    }
    return Promise.reject(error);
  }
);

3. 根组件根据状态切换渲染内容：

// App.jsx
import { useSelector } from './store';
import ForbiddenPage from './ForbiddenPage';
import MainApp from './MainApp';

function App() {
  const isForbidden = useSelector(state => state.isForbidden);
  
  if (isForbidden) {
    return <ForbiddenPage />;
  }
  
  return <MainApp />;
}

这种方式不会破坏应用的状态一致性，完全符合React的最佳实践。

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