Question

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

问题

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

能帮我吗？

我的Keycloak配置：

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

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

我的代码（我正在使用此库：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

对于与CORS相关的问题，您必须设置Web Origins网络原始码的用途是什么，下面是正式文件

网站起源

此选项围绕CORS表示，CORS代表跨域资源   分享。如果浏览器JavaScript尝试向AJAX HTTP请求   域与JavaScript代码不同的服务器   来自，则该请求必须使用CORS。服务器必须处理CORS   以特殊方式请求，否则浏览器将不会显示或   允许处理请求。存在此协议是为了保护   抵抗XSS，CSRF和其他基于JavaScript的攻击。</ p>
Keycloak支持已验证的CORS请求。它的工作方式是   客户端的“ Web起源”设置中列出的域是   嵌入到发送给客户端应用程序的访问令牌中。的   然后，客户端应用程序可以使用此信息来决定是否或   不允许在其上调用CORS请求。这是一个扩展   到OIDC协议，因此只有Keycloak客户端适配器支持此功能   特征。有关更多信息，请参见保护应用程序和服务指南。   信息。

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

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

Answer 2

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

通配符*不适用于经过身份验证的请求，因此请对其进行显式配置
某些浏览器可能不支持针对本地主机（Deadly CORS when http://localhost is the origin）的CORS，因此请不要使用本地主机进行开发

Answer 3

在针对本地主机上的服务器使用Vue.js进行开发时，我浪费了半天时间。

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

登录到Keycloak管理屏幕，选择领域pwe-realm，然后选择您的客户端pwe-web。
滚动到“ Web Origin”设置，然后键入加号。不要单击（+）按钮，而要直接输入+。这会将您在上方定义的所有有效重定向URI添加到Web Origins标头中。您还需要将角度应用程序的URI添加到“有效重定向URI”列表中。
按屏幕底部的保存。

它应该立即工作。

KeyCloak：所请求的资源上没有“ Access-Control-Allow-Origin”标头

3 个答案: