如何让Redoc加载本地schema.yaml或添加Authorization请求头？

针对Redoc默认不携带认证头导致无法拉取私有API Schema的问题，提供以下几种可行方案：

方案1：本地加载Schema文件（无需请求私有服务器） #

这是最直接的方式，将schema.yaml下载到本地后，通过两种方式供Redoc读取：

方式1：指向本地文件路径 #

将下载的schema.yaml放在HTML文件同目录下，修改<redoc>标签的spec-url为本地路径：

<!DOCTYPE html>
<html>
   <head>
      <title>Example API</title>
      <meta charset="utf-8"/>
      <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>
      <redoc spec-url='./schema.yaml'></redoc>
      <script src="redoc.standalone.js"></script>
   </body>
</html>

方式2：直接嵌入Schema内容到HTML #

如果不想额外加载本地文件，可以将schema.yaml的内容直接嵌入到页面中，通过spec-data属性传递：

<!DOCTYPE html>
<html>
   <head>
      <title>Example API</title>
      <meta charset="utf-8"/>
      <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>
      <redoc spec-data='openapi: 3.0.0
info:
  title: Example API
  version: 1.0.0
# 此处粘贴完整的schema.yaml内容'></redoc>
      <script src="redoc.standalone.js"></script>
   </body>
</html>

或者用更易维护的方式，通过script标签存储Schema，再用JS初始化Redoc：

<!DOCTYPE html>
<html>
   <head>
      <title>Example API</title>
      <meta charset="utf-8"/>
      <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 id="api-schema" type="text/yaml">
openapi: 3.0.0
info:
  title: Example API
  version: 1.0.0
# 粘贴完整的schema.yaml内容
      </script>
      <script src="redoc.standalone.js"></script>
      <script>
        Redoc.init(
          document.getElementById('api-schema').textContent,
          {},
          document.getElementById('redoc-container')
        );
      </script>
   </body>
</html>

方案2：为Redoc请求添加Authorization头 #

如果需要直接从私有API拉取Schema，可以通过Redoc的配置添加认证头，有两种实现方式：

方式1：通过HTML标签属性配置 #

直接在<redoc>标签中添加headers属性，值为JSON格式的请求头（注意转义引号）：

<!DOCTYPE html>
<html>
   <head>
      <title>Example API</title>
      <meta charset="utf-8"/>
      <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>
      <redoc spec-url='https://api.example.com/schema.yaml' headers='{"Authorization": "Bearer YOUR_AUTH_TOKEN"}'></redoc>
      <script src="redoc.standalone.js"></script>
   </body>
</html>

方式2：JavaScript动态初始化（支持动态获取token） #

如果token需要从本地存储或其他动态来源获取，推荐用JS手动初始化Redoc：

<!DOCTYPE html>
<html>
   <head>
      <title>Example API</title>
      <meta charset="utf-8"/>
      <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="redoc.standalone.js"></script>
      <script>
        // 示例：从localStorage获取token，可根据实际场景调整
        const authToken = localStorage.getItem('api_auth_token');
        
        Redoc.init(
          'https://api.example.com/schema.yaml',
          {
            headers: {
              Authorization: `Bearer ${authToken}`
            }
          },
          document.getElementById('redoc-container')
        );
      </script>
   </body>
</html>

注意：如果token存在过期或刷新逻辑，JS初始化的方式更灵活，可以在初始化前完成token的刷新和验证。

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