Angular HTTP リクエストに認証ヘッダーを追加して CORS 問題を解決する方法-Golang-php.cn

Angular HTTP リクエストに認証ヘッダーを追加して CORS 問題を解決する方法

Linda Hamilton

リリース： 2024-12-14 19:47:14

オリジナル

414 人が閲覧しました

How to Add Authorization Headers to Angular HTTP Requests and Resolve CORS Issues?

Angular HTTP リクエストに認可ヘッダーを追加します

問題ステートメント:

Angular HTTP に認可ヘッダーを追加しようとしていますリクエストしましたが、「「Access-Control-Allow-Origin」ヘッダーが存在しません」を受信しました要求されたリソースで" エラーが発生しました。

解決策:

Angular アプリケーションでは、認証ヘッダーの管理に HTTP インターセプターが推奨されます。 ガードは、ルート保護のためにこのアプローチを補完できます。

認証インターセプターの実装:

インターセプターファイルの作成: (例: 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>> {
    if (AuthService.isLoggedIn()) {
      const token = AuthService.getToken();
      req = req.clone({
        setHeaders: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
      });
    }
    return next.handle(req);
  }
}

ログイン後にコピー

アプリモジュールにインターセプターを登録:

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

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

ログイン後にコピー

Go についてHTTP リクエスト:

エラーは示唆していますリクエストヘッダーと CORS 設定の間に不一致がある可能性があります。次の手順を実装します。

AllowedHeaders ミドルウェアパラメーターを * に設定して、すべてのヘッダーを許可します。

headersOk := handlers.AllowedHeaders([]string{"*"})

ログイン後にコピー

送信されたヘッダーと一致するように CORS 設定を繰り返し構成します。 Angular クライアントによる。

以上がAngular HTTP リクエストに認証ヘッダーを追加して CORS 問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。