angular-oauth2-oidc Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

Viewed 145

I have no paramètre dev server for cross origin

I try to add OpendID connect on my front-side , and add tokens in all my services.

so i use angular-oauth2-oidc for that , and now i have secure my routes page but access of my api`, i have white page for all routes.

Error on console

Access to XMLHttpRequest at 'https://<myURL>/AutoConnectSSO/idserver/.well-known/openid-configuration' from origin 'http://localhost:6363' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
angular-oauth2-oidc.mjs:1398 
error loading discovery document HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'https://<myURL>/AutoConnectSSO/idserver/.well-known/openid-configuration', ok: false, …}
GET https://<myURL>/AutoConnectSSO/idserver/.well-known/openid-configuration net::ERR_FAILED 200
const configAuthZero: AuthConfig = environment.idp;

export function storageFactory(): OAuthStorage {
  return localStorage
}

@NgModule({
  imports: [OAuthModule.forRoot()],
  providers: [
    InitialAuthService,
    { provide: AuthConfig, useValue: configAuthZero },
    { provide: OAuthStorage, useFactory: storageFactory },
    {
      provide: APP_INITIALIZER,
      useFactory: (initialAuthService: InitialAuthService) => () =>
        initialAuthService.initAuth(),
      deps: [InitialAuthService],
      multi: true,
    },
  ],
})
export class AuthModule { }

@Injectable({
  providedIn: "root",
})
export class InitialAuthService {
  private jwtHelper: JwtHelperService = new JwtHelperService();

  private _decodedAccessToken: any;
  private _decodedIDToken: any;
  get decodedAccessToken() {
    return this._decodedAccessToken;
  }
  get decodedIDToken() {
    return this._decodedIDToken;
  }

  constructor(
    private oauthService: OAuthService,
    private authConfig: AuthConfig,
    public router: Router,
  ) { }

  async initAuth(): Promise<any> {
    return new Promise<void>((resolveFn, rejectFn) => {

      this.oauthService.configure(this.authConfig);
      this.oauthService.setStorage(localStorage);
      this.oauthService.tokenValidationHandler = new NullValidationHandler();

      this.oauthService.events
        .pipe(filter((e: any) => e.type === "token_received"))
        .subscribe(({ type }) => {
          this.handleNewToken();
        });


      this.oauthService.loadDiscoveryDocumentAndLogin().then(
        (isLoggedIn) => {

          if (isLoggedIn) {
            this.oauthService.setupAutomaticSilentRefresh();
            resolveFn();
          } else {
            this.oauthService.initImplicitFlow();
            rejectFn();
          }
        },
        (error: { status: number; }) => {
          console.log({ error });
          if (error.status === 400) {
            location.reload();
          }
        }
      );
    });
  }

  private handleNewToken() {
    this._decodedAccessToken = this.jwtHelper.decodeToken(
      this.oauthService.getAccessToken()
    );

    this._decodedIDToken = this.jwtHelper.decodeToken(
      this.oauthService.getIdToken()
    );
  }

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

@Injectable({
    providedIn: 'root'
})
export class UserService {

  requestUrl = "http://localhost:8089/api/users";
  
   h = new HttpHeaders()
   .set('Access-Control-Allow-Origin', '*')
   .set('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,PATCH,OPTIONS');

    constructor(private _httpClient: HttpClient) {
    }
  
    getAll(): Observable<any[]> {
     
      return this._httpClient.get<any[]>(this.requestUrl,{headers:this.h} );
    }

  }
0 Answers
Related