Keyloak-angular (https://github.com/mauriciovigolo/keycloak-angular) - 注册 - CORS 错误

问题描述

我正在使用 keycloak-angular 库 (https://github.com/mauriciovigolo/keycloak-angular) 将 Keycloak 集成到我的 SPA 中。 SpringBoot 暂时不涉及

登录按预期工作。注册在我的 Angular 应用程序中引发以下错误。

Access to XMLHttpRequest at 'http://localhost:8080/auth/realms/mealplanner/account' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
main.ts:12 TypeError: Cannot read property 'ngOriginalError' of undefined
    at getoriginalError (core.js:4191)
    at ErrorHandler._findOriginalError (core.js:4263)
    at ErrorHandler.handleError (core.js:4240)
    at core.js:28097
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:123)
    at ngzone.runOutsideAngular (core.js:27364)
    at core.js:28097
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27437)
(anonymous) @ main.ts:12
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
XMLHttpRequest.send (async)
scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto.<computed> @ zone-evergreen.js:1449
Keycloak.kc.loadUserProfile @ keycloak.js:568
(anonymous) @ keycloak-angular.js:205
(anonymous) @ tslib.es6.js:74
ZoneAwarePromise @ zone-evergreen.js:960
__awaiter @ tslib.es6.js:70
loadUserProfile @ keycloak-angular.js:198
(anonymous) @ keycloak-angular.js:114
fulfilled @ tslib.es6.js:71
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27437
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27425
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
XMLHttpRequest.send (async)
scheduleTask @ zone-evergreen.js:2845
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2878
proto.<computed> @ zone-evergreen.js:1449
processCallback @ keycloak.js:790
(anonymous) @ keycloak.js:288
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27437
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27425
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
desc.set @ zone-evergreen.js:1279
setupCheckLoginIframe @ keycloak.js:1224
processInit @ keycloak.js:287
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27437
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27425
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
postMessage (async)
(anonymous) @ VM55 step2.html:25
zone-evergreen.js:2845 GET http://localhost:8080/auth/realms/mealplanner/account net::ERR_Failed

我的 Angular 代码：

app.init.ts：

import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService) {
    return () =>
      keycloak.init({
        config: {
          url: 'http://localhost:8080/auth',realm: 'mealplanner',clientId: 'meal-planner-app-client'
        },loadUserProfileAtStartUp : true
      });
  }

app.module.ts：

providers : [ 
    ...
    {provide: APP_INITIALIZER,useFactory: initializeKeycloak,multi: true,deps: [KeycloakService]}]

与错误无关的代码（为了完整性而包含在内）：

/app-info/home 对所有人可见。 /app-info/user 受登录保护。

app-routing.module.ts:

const appRoutes:  routes = [
    {path:'meal-planner',component: UserComponent,canActivate: [AuthGuardService]}
];  

auth-guard.service.ts：

export class AuthGuardService extends KeycloakAuthGuard {
  constructor(
    protected readonly router: Router,protected readonly keycloak: KeycloakService
  ) {
    super(router,keycloak);
  }

  public async isAccessAllowed(
    route: ActivatedRouteSnapshot,state: RouterStateSnapshot
  ) {
    
    // Force the user to log in if currently unauthenticated.
    if (!this.authenticated) {
    
      await this.keycloak.login({
        redirectUri: window.location.origin + state.url
      });
    }

    else return true;
  }
}

在 Keycloak 中：Clients -> Meal-planner-client -> WebOrigins -> *（也尝试使用 + 和 localhost:4200） - 不起作用

客户端 -> 设置 -> 访问类型 -> 公共

版本： "keycloak-angular": "^8.1.0","keycloak-js": "^12.0.4",角 10 钥匙斗篷：12.0.4

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）