title: okta Angular 7 App returning a CORS error
body: <p>I am currently working through this demo:<br>
  <a href="https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce" rel="nofollow noreferrer">https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce</a></p>
  
  <p>I am setting up the OIDC Version</p>
  
  <p>I am getting the following error: </p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at
    ‘<a href="https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration" rel="nofollow noreferrer">https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration</a>’ from origin ‘<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>’ has been blocked by CORS policy:
    No ‘Access-Control-Allow-Origin’ header is present on the requested
    resource.</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>I am using Angular version 7.1 (Just like the demo)</p>
  
  <p>Here is my code:</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;Welcome to {{ title }}!&lt;/h1&gt;
  
  &lt;div *ngIf="givenName"&gt;
    &lt;h2&gt;Hi, {{givenName}}!&lt;/h2&gt;
    &lt;button (click)="logout()"&gt;Logout&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf="!givenName"&gt;
    &lt;button (click)="login()"&gt;Login&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>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'];
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Any help would be appreciated.  </p>