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

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.

Answer 2

From the CORS definition in Mozilla.

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.

So for your request to work, you have two options:

1. Add an 'Access-Control-Allow-Origin' header to your API's response with a value of your ip ie. Access-Control-Allow-Origin: "172.168.1.1"
2. Add your external IP Address to the Allowed addresses via the Okta interface if you have access to it. Check here.

You can view your external ip address via website that let you view them. Try to check yours at Cmyip.

Answer 3

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

is a redirect URL so you gotta redirect, don't use XMLHttpRequest. You can test this by simply pasting the above URL to the browser. As you can see, it gives you the data you looking for.

Answer 4

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.