okta Angular 7 App returning a CORS error

Question

I am currently working through this demo:
https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce

I am setting up the OIDC Version

I am getting the following error:

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.

I have been playing around with this off and on for the last 3 days and I can't seem to get it to work.

I am using Angular version 7.1 (Just like the demo)

Here is my code:

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 { }

Any help would be appreciated.

Answer 1

With the help of @MattRaible pointing me to the right direction I was able to resolve this issue. Basically, I didn't have authority to add a Trusted Origin (menu item API | Trusted Origin) on the okta site. Once an administrator added ‘http://localhost:4200’ as a Trusted Origin everything started working.

Thanks to everyone who commented on this post.

Answer 2

All you would need to do is send 'Access-Control-Allow-Origin':'*' along with the request in your angular service file. I have shown below a way to do this. This simply modifies the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere.

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', []))
    );
}

Hope this helps.