angular - key 斗篷 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

我正在使用 Angular 8.0.3 和 keycloak 6.0.1 进行正面身份验证。

问题

我设法从我的应用程序进入 keycloak 登录页面。使用我的登录详细信息登录后，出现错误:
-localhost/:1 在 ' https://localhost:8080/auth/realms/pwe-realm/protocol/openid-connect/token 访问 XMLHttpRequest '来自原产地' http://localhost:4200 ' 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。
-Keycloak init failed Keycloak 初始化过程中发生错误。

请问你能帮帮我吗 ？

我的 Keycloak 配置:

1 领域:pwe 领域
2个客户:
-pwe-api(用于我的后端)
-pwe-web(用于我的身份验证前端)

pwe-web 配置:
客户端协议(protocol):openid-connect
访问类型:公共(public)
有效的重定向 Uris:http//:localhost:4200/(我也试过“*”)

我的代码(我正在使用这个库:keycloak-angular):

环境.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
};

应用程序模块.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 Origins:

登录到 Keycloak 管理屏幕，选择领域 pwe-realm，然后选择您的客户端 pwe-web。

滚动到 Web Origin 设置并输入加号。不要点击 (+) 按钮，而是直接输入 + 。这会将您在上面定义的所有有效重定向 URI 添加到 Web Origins header 。您还需要将 Angular 应用程序的 URI 添加到有效重定向 URI 列表中。

按屏幕底部的保存。

它应该立即起作用。