okta Angular 7 应用程序返回 CORS 错误

Question

我目前正在完成这个演示：
https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce

我正在设置 OIDC 版本

我收到以下错误：

Access to XMLHttpRequest at ‘https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在过去的 3 天里，我一直在断断续续地玩这个，但我似乎无法让它工作。

我正在使用 Angular 7.1 版（就像演示一样）

这是我的代码：

app.component.html

<h1>Welcome to {{ title }}!</h1>

<div *ngIf="givenName">
  <h2>Hi, {{givenName}}!</h2>
  <button (click)="logout()">Logout</button>
</div>

<div *ngIf="!givenName">
  <button (click)="login()">Login</button>
</div>

<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { OAuthService, JwksValidationHandler, AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://dev-979343.oktapreview.com/oauth2/default',
  redirectUri: window.location.origin,
  clientId: '0oaka2hty7eVrwEHS0h7'
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-secure';

  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  login() {
    this.oauthService.initImplicitFlow();
  }

  logout() {
    this.oauthService.logOut();
  }

  get givenName() {
    const claims = this.oauthService.getIdentityClaims();
    if (!claims) {
      return null;
    }
    return claims['name'];
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如有任何帮助，我们将不胜感激。

Answer 1

来自 Mozilla 中的 CORS 定义。

A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

因此，为了使您的请求生效，您有两个选择：

将 'Access-Control-Allow-Origin' header 添加到您的 API 的响应中，其中包含您的 ip 值，即。 Access-Control-Allow-Origin: "172.168.1.1"
如果您有权访问，请通过 Okta 界面将您的外部 IP 地址添加到允许的地址。检查 here.

您可以通过允许您查看它们的网站查看您的外部 IP 地址。尝试在 Cmyip.

查看你的

Answer 2

您需要做的就是发送 'Access-Control-Allow-Origin':'*' 以及 angular 服务文件中的请求。我在下面展示了一种方法来做到这一点。这只是修改服务器以添加 header Access-Control-Allow-Origin: * 以启用来自任何地方的 cross-origin 请求。

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)**// Pass in the options in the request**
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

希望对您有所帮助。

Answer 3

https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration

是一个 重定向 URL 所以你必须重定向， 不要使用 XMLHttpRequest。您可以通过简单地将上面的 URL 粘贴到浏览器来测试它。如您所见，它为您提供了所需的数据。

Answer 4

在@MattRaible 的帮助下，我指出了正确的方向，我得以解决了这个问题。基本上，我无权在 okta 站点上添加可信来源（菜单项 API |可信来源）。一旦管理员将“http://localhost:4200”添加为可信来源，一切就开始工作了。

感谢所有对此发表评论的人 post。

okta Angular 7 应用程序返回 CORS 错误

okta Angular 7 App returning a CORS error

okta

angular