Express服务器中间件中Keycloak认证端点遭CORS拦截问题排查

我在使用Svelte前端调用Express后端中受keycloak.protected保护的接口时，遇到了CORS错误。但用前端获取到的Bearer令牌在Postman中发起请求却能正常工作。

相关信息：

• 前端项目：keycloak-client
• 后端项目：keycloak-server
• 完整CORS错误截图：
• Keycloak访问配置截图：

解决方法 #

1. 调整Express中间件顺序，优先加载CORS #

CORS中间件必须放在Keycloak中间件和受保护路由之前，否则预检请求会被Keycloak拦截。修改后端代码：

const cors = require('cors');
const keycloak = require('./keycloak-config');

// 配置CORS，适配前端环境
app.use(cors({
  origin: 'http://localhost:5173', // 替换为你的Svelte前端实际域名
  credentials: true,
  allowedHeaders: ['Authorization', 'Content-Type'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
}));

// 加载Keycloak中间件
app.use(keycloak.middleware({
  logout: '/logout',
  admin: '/'
}));

// 挂载受保护路由
app.get('/protected', keycloak.protect(), (req, res) => {
  res.json({ message: 'Protected resource accessed' });
});

2. 修正Keycloak客户端配置 #

结合你的Keycloak访问设置截图，确认以下配置：

• Web Origins：设置为前端域名（如http://localhost:5173），开发环境可临时用*，生产环境务必指定具体域名
• Access Type：设置为public（Svelte属于单页应用，是公共客户端类型）

3. 确保前端请求正确携带令牌 #

前端发起请求时，必须在请求头中携带Authorization: Bearer <token>，Svelte中的示例代码：

async function getProtectedData() {
  const token = keycloak.token; // 从Keycloak实例获取有效令牌
  const res = await fetch('http://localhost:3000/protected', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  const data = await res.json();
  console.log(data);
}

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