Redoc生成的独立HTML页面空白问题排查求助

你的代码主要存在两个核心问题导致页面空白，以下是具体分析和修复方案：

1. 内容安全策略（CSP）限制过严 #

当前CSP配置阻止了Redoc加载API规范文件（无论是本地还是外部），同时部分必要资源的访问也被限制。修改后的CSP需要放开必要的资源权限：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' https: wss: ws:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.redoc.ly; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.googleapis.com; img-src 'self' blob: data: https:;"
/>

• 给default-src添加https:，允许加载外部HTTPS资源（如PetStore的Swagger规范）
• 移除style-src中不必要的unsafe-eval，Redoc样式加载不需要该权限
• 给img-src添加https:，避免Redoc内置图标加载失败

2. 本地文件跨域限制与兼容性问题 #

直接通过file://协议打开HTML文件时，浏览器会因跨域规则阻止加载本地的openapi.json；同时自定义元素的spec属性在部分场景下存在解析兼容性问题。

修复方式二选一： #

方式A：改用脚本主动初始化Redoc

替换原有的<redoc>标签和脚本，主动初始化的方式更稳定可靠：

<body>
  <div id="redoc-container"></div>
  <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"></script>
  <script>
    // 加载本地openapi.json（需配合HTTP服务器访问）
    Redoc.init('./openapi.json', {}, document.getElementById('redoc-container'));
    // 如需测试PetStore规范，替换为下方代码
    // Redoc.init('https://petstore.swagger.io/v2/swagger.json', {}, document.getElementById('redoc-container'));
  </script>
</body>

方式B：使用HTTP服务器访问页面

不要直接双击HTML文件，启动本地HTTP服务器访问docs文件夹：

• Python环境：执行python -m http.server --directory docs
• 浏览器访问http://localhost:8000/你的HTML文件名.html

完整修正后的代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Test Redoc</title>
    <meta charset="utf-8"/>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' https: wss: ws:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.redoc.ly; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
      font-src 'self' https://fonts.googleapis.com; img-src 'self' blob: data: https:;"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">

    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="redoc-container"></div>
    <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"></script>
    <script>
      Redoc.init('./openapi.json', {}, document.getElementById('redoc-container'));
    </script>
  </body>
</html>

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