KeyCloak：请求的资源上没有“access-control-allow-origin”标头

Question

问题

我设法从我的应用程序进入keycloak登录页面。使用“我的登录详细信息”登录后，出现错误:
-localhost/:1 CORS策略阻止了从源“http：//localhost:4200”访问“https：//localhost:8080/auth/realms/pwe-realm/protocol/openid-connect/token”的XMLHttpRequest：请求的资源上没有“access-control-allow-origin”标头。
-Keycloak初始化失败Keycloak初始化期间发生错误。

你能帮帮我吗？

我的密钥斗篷配置：

1领域:pwe-realm
2客户端:
-pwe-api（用于我的后端）
-pwe-web（用于我的身份验证前端）

pwe-web配置:
客户端协议：openid-connect
访问类型：public
有效的redicrect URI：http//:localhost:4200/（我还尝试了“*”）

我的代码（我正在使用这个librairy：keycloak-angular）：

Environments.ts：

import {KeycloakConfig} from 'keycloak-angular';

const keycloakConfig: KeycloakConfig = {
  url: 'https://localhost:8080/auth',
  realm: 'pwe-realm',
  clientId: 'pwe-web'
};

export const environment = {
  production: false,
  keycloakConfig
};

app.moudle.ts

//imports

const keycloakService = new KeycloakService();

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    KeycloakAngularModule,
    BrowserModule,
    AppRoutingModule,
    ...
  ],
  providers: [
    {
      provide: KeycloakService,
      useValue: keycloakService,
    }
  ],
  entryComponents: [AppComponent]
})
export class AppModule implements DoBootstrap {
  async ngDoBootstrap(app) {
    const { keycloakConfig } = environment;

    try {
      await keycloakService.init({ config: keycloakConfig });
      app.bootstrap(AppComponent);
    } catch (error) {
      console.error('Keycloak init failed', error);
    }
  }
}

Answer 1

在使用vue.js对localhost上的服务器进行开发时，我为此浪费了半天时间。

您可能需要为Keycloak客户端在Keycloak服务器上设置Web源：

1. 登录到Keycloak admin屏幕，选择realm pwe-realm，然后选择您的客户端pwe-web。
2. 滚动到Web原始设置并键入加号。不要点击(+)按钮，而是直接键入+。这会将上面定义的所有有效重定向URI添加到Web Origins标头中。您还需要将angular应用程序的URI添加到有效重定向URI列表中。
3. 按屏幕底部的保存。