Okta Angular 7 App возвращает ошибку CORS - PullRequest
Новая
       18

Okta Angular 7 App возвращает ошибку CORS

1 голос
/ 13 апреля 2019

В настоящее время я работаю с этой демонстрацией:
https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce

Я устанавливаю версию OIDC

Я получаю следующую ошибку:

Доступв XMLHttpRequest по адресу https://dev -979343.oktapreview.com / oauth2 / default / .well-known / openid-configuration 'from origin' http://localhost:4200’ заблокирован политикой CORS: нетЗаголовок «Access-Control-Allow-Origin» присутствует на запрошенном ресурсе.

Я играл с этим в течение последних 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 { }

Любая помощь будет принята с благодарностью,

Ответы [ 4 ]

1 голос
/ 13 апреля 2019

Все, что вам нужно сделать, это отправить 'Access-Control-Allow-Origin':'*' вместе с запросом в вашем угловом сервисном файле. Я показал ниже способ сделать это. Это просто изменяет сервер, добавляя заголовок Access-Control-Allow-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', []))
    );
}

Надеюсь, это поможет.

0 голосов
/ 17 апреля 2019

С помощью @MattRaible, указавшей мне правильное направление, я смог решить эту проблему.По сути, у меня не было полномочий добавлять Trusted Origin (пункт меню API | Trusted Origin) на сайт okta.Как только администратор добавил «http://localhost:4200’ в качестве доверенного источника», все стало работать.

Спасибо всем, кто прокомментировал этот пост.

0 голосов
/ 13 апреля 2019 
https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration

- это URL-адрес перенаправления , поэтому вам нужно перенаправить, не использовать XMLHttpRequest .Вы можете проверить это, просто вставив указанный выше URL в браузер.Как видите, он предоставляет вам данные, которые вы ищете.

0 голосов
/ 13 апреля 2019

Из определения CORS в Mozilla.

Веб-приложение выполняет HTTP-запрос с несколькими источниками, когда запрашивает ресурс с другим источником (домен, протокол,и порт), чем его собственный источник.

Итак, для вашего запроса на работу у вас есть две опции:

  1. Добавить заголовок 'Access-Control-Allow-Origin'на ответ вашего API со значением вашего ip т.е.Access-Control-Allow-Origin: "172.168.1.1"
  2. Добавьте свой внешний IP-адрес к разрешенным адресам через интерфейс Okta, если у вас есть доступ к нему.Проверьте здесь .

Вы можете просмотреть свой внешний IP-адрес через веб-сайт, который позволяет просматривать их.Попробуйте проверить свои на Cmyip .

...