KeyCloak：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

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

问题

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

请问你能帮帮我吗 ？

我的 Keycloak 配置：

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

pwe-web 配置：
客户端协议：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
};

app.module.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 针对本地主机上的服务器进行开发时，我浪费了半天时间。

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

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

它应该立即起作用。

Answer 2

对于 CORS 相关问题，您必须设置Web Origins. 下面是官方文档

网络起源

此选项以 CORS 为中心，CORS 代表跨源资源共享。如果浏览器 JavaScript 尝试向域与 JavaScript 代码来源域不同的服务器发出 AJAX HTTP 请求，则该请求必须使用 CORS。服务器必须以特殊方式处理 CORS 请求，否则浏览器将不会显示或允许处理请求。该协议的存在是为了防止 XSS、CSRF 和其他基于 JavaScript 的攻击。

Keycloak 支持经过验证的 CORS 请求。其工作方式是，客户端的 Web 起源设置中列出的域嵌入到发送到客户端应用程序的访问令牌中。然后，客户端应用程序可以使用此信息来决定是否允许对其调用 CORS 请求。这是 OIDC 协议的扩展，因此只有 Keycloak 客户端适配器支持此功能。有关详细信息，请参阅保护应用程序和服务指南。

要填写 Web Origins 数据，请输入基本 URL 并单击 + 号进行添加。单击要删除的 URL 旁边的 - 符号。请记住，您仍然必须单击“保存”按钮！

因此，在您的客户端中设置“Web Origins”（或仅添加*）。

Answer 3

我同意，您需要配置Web Origins，但是：

• 通配符*不适用于经过身份验证的请求，因此请明确配置它们

• 一些浏览器可能不支持 localhost 的CORS（当 http://localhost 是源时致命的 CORS），所以不要使用 localhost 进行开发