如何通过Swagger获取Keycloak Token及解决相关CORS认证错误

1. 优先修复CORS错误 #

Keycloak端配置 #

• 登录Keycloak控制台，进入目标Realm → Clients → 你的客户端 → Web Origins，添加Swagger UI所在的完整域名（例如http://localhost:3000，生产环境禁止用*）
• 开启Direct Access Grants Enabled（必须开启，否则无法通过用户名密码获取Token）
• 确认客户端Access Type设置为public（前端Swagger直接调用时）或confidential（后端中转调用时）

Node.js后端配置 #

如果你的API后端基于Node.js，使用cors中间件明确允许Swagger的Origin及认证头：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的Swagger UI地址
  credentials: true,
  allowedHeaders: ['Authorization', 'Content-Type']
}));

2. 正确配置Swagger的OpenID密码流 #

不要直接替换bearerAuth，而是在Swagger中同时配置OpenID密码流与Bearer认证，让Swagger UI支持直接输入用户名密码获取Token：

openapi: 3.0.0
info:
  title: 你的API名称
  version: 1.0.0
servers:
  - url: http://localhost:8080/api # 你的API地址
components:
  securitySchemes:
    oauth2Password:
      type: oauth2
      flows:
        password:
          tokenUrl: http://{keycloak-domain}/auth/realms/{your-realm}/protocol/openid-connect/token # 替换为你的Keycloak Token地址
          scopes: {}
    bearerAuth:
      type: http
      scheme: bearer
      bearerFormat: JWT
security:
  - bearerAuth: []
paths:
  # 示例API接口
  /example:
    get:
      security:
        - bearerAuth: []
      responses:
        '200':
          description: 请求成功

配置完成后，Swagger UI的「Authorize」按钮会提供密码流选项，直接输入用户名密码即可获取并自动携带Token。

3. 绕过CORS的替代方案：后端中转Token接口 #

如果OpenID配置仍有问题，可在Node.js后端写一个中转接口，由后端调用Keycloak的Token接口（后端调用无CORS限制），再返回Token给前端：

app.post('/api/get-keycloak-token', async (req, res) => {
  const { username, password } = req.body;
  const tokenUrl = 'http://{keycloak-domain}/auth/realms/{your-realm}/protocol/openid-connect/token';
  
  const formData = new URLSearchParams();
  formData.append('grant_type', 'password');
  formData.append('client_id', '{your-client-id}'); // 替换为你的Keycloak客户端ID
  formData.append('username', username);
  formData.append('password', password);

  try {
    const response = await fetch(tokenUrl, {
      method: 'POST',
      body: formData,
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
    const tokenData = await response.json();
    res.status(response.status).json(tokenData);
  } catch (error) {
    res.status(500).json({ error: '获取Token失败', details: error.message });
  }
});

在Swagger中添加这个接口，前端调用它拿到Token后，再用bearerAuth调用其他API即可。

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