本地环境Keycloak重定向至https而非http的问题排查

核心问题 #

本地Vite开发环境中，通过ProtectedRoute组件重定向到Keycloak授权后，Keycloak强制跳转至https://localhost:3000，触发SSL协议错误；尝试用vite-plugin-mkcert启用HTTPS时出现空响应错误，无法定位问题出在前端还是后端。

排查与解决步骤 #

1. 检查Keycloak客户端配置 #

• 登录Keycloak管理后台，找到对应前端客户端
• 在「有效重定向URI」中添加http://localhost:3000/*，确保开发环境的HTTP地址被允许
• 确认「强制HTTPS」选项未勾选（开发环境无需强制）
• 检查「访问类型」设置为public（适配SPA场景）

2. 验证后端认证端点的URL处理 #

• 直接访问后端认证端点：http://localhost:3000/api/v3/auth/request?development_mode=1&redirect_to=http://localhost:3000/
• 跳转至Keycloak页面后，查看地址栏中的redirect_uri参数，确认是否为http://localhost:3000开头
• 若参数被替换为HTTPS，说明后端逻辑在开发环境强制转换了协议，需要后端调整代码保留HTTP

3. 修复vite-plugin-mkcert的空响应问题 #

• 确保插件正确安装：

npm install vite-plugin-mkcert --save-dev

• 在vite.config.js中正确配置HTTPS：

import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: {
    https: true,
    port: 3000,
    open: true
  },
  plugins: [mkcert()]
})

• 重启Vite时，若提示证书安装，允许系统信任本地证书；若有权限问题，以管理员身份运行终端
• 若仍有空响应，检查端口3000是否被占用，尝试更换端口（如3001）

4. 前端代码优化 #

• 避免硬编码后端地址，在.env.development中配置环境变量：

VITE_API_BASE=http://localhost:3000/api/v3

• 调整ProtectedRoute组件：

export const ProtectedRoute = ({ children }) => {
  const [cookies] = useCookies(['access_token'])
  const currentUrl = encodeURIComponent(window.location.href)

  if (!cookies.access_token) {
    window.location.href = `${import.meta.env.VITE_API_BASE}/auth/request?redirect_to=${currentUrl}&development_mode=1`
  }

  return children
}

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