Keycloak与Flutter Web集成遇CORS跨域问题求助

直接修复：移除错误的请求头 #

你的错误核心是客户端请求中携带了Access-Control-Allow-Origin头——这个头是服务器用来响应跨域请求的，不属于客户端需要发送的请求头。浏览器发送预检请求时，发现该头不在Keycloak允许的请求头列表内，因此拦截了请求。

修改你的Flutter代码，删除多余的Access-Control-Allow-Origin头：

String url = 'http://xxx.xx.xxx.xxx:8080/auth/realms/hasura-app/protocol/openid-connect/token';

Map<String, String> headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
};

String body = 'username=user&password=password&grant_type=password&client_id=hasura';

final response = await http.post(Uri.parse(url), headers: headers, body: body);
print(response.body);

配置Keycloak允许跨域源 #

即使移除了错误头，生产/局域网部署环境仍需让Keycloak明确允许你的Flutter Web应用来源，操作步骤如下：

1. 登录Keycloak管理控制台，进入hasura-app realm
2. 切换到Clients标签，选中hasura客户端
3. 进入Settings标签，滚动到Web Origins字段
4. 添加你的Flutter Web应用来源：
   • 开发环境：http://localhost:5050
   • 局域网生产环境：填写应用部署的域名或IP（比如http://192.168.1.100:5050）
   • 封闭信任环境可直接填*（允许所有源，仅限内部网络使用）
5. 点击Save保存配置

验证配置 #

重启Keycloak服务后，重新运行Flutter Web应用，即可正常获取JWT Token，无需依赖浏览器禁用安全策略的临时方案。

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