Angular で認証ヘッダーを追加するときに CORS エラーを解決するにはどうすればよいですか?

Angular HTTP リクエストへの認可ヘッダーの追加

問題:

Angular アプリケーションで発生しているHTTP リクエストに「Authorization」ヘッダーを追加するときに CORS エラーが発生する。エラーは次のとおりです:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403

ベスト プラクティス:

Angular 4 以降では、HTTP インターセプターを使用してリクエストに認証ヘッダーを追加し、保護するガードを使用することをお勧めします。ルート。

Angular実装:

AuthInterceptor を使用するには、TypeScript ファイル (例: auth.interceptor.ts) を作成します。

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });

    return next.handle(req);
  }
}

次に、app.module.ts にインターセプターを登録します。 :

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

行く実装:

Go 側で、CORS ミドルウェアが必要なリクエスト ヘッダーを許可していることを確認します。

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

問題が解決しない場合は、ヘッダーと一致するように CORS 設定を慎重に構成します。クライアントによって送信されました。

以上がAngular で認証ヘッダーを追加するときに CORS エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。