Angular HTTP ヘッダーと Go CORS の問題をトラブルシューティングする方法は?

Angular HTTP ヘッダーと Go CORS のトラブルシューティング

CORS (Cross-Origin Resource Sharing) は、Angular アプリを Go API に接続する際の悩みの原因となることがよくあります。 Angular で Authorization ヘッダーを追加する方法と Go で CORS を処理する方法を理解することは、両者間の通信を成功させるために重要です。

Angular Authorization ヘッダー

Angular で Authorization ヘッダーを追加するには、Http インターセプターを利用する必要があります。認証インターセプターの例は次のとおりです。

@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);
  }
}

アプリのモジュールにインターセプターを登録します。

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

Go CORS Handling

Go コードでAngular アプリからの必要なリクエスト ヘッダー:

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

問題がある場合永続化するには、クライアントのリクエスト ヘッダーと一致するように CORS 設定を慎重に構成します。

解決された問題の例

次の Angular コード:

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})

次の Go コードと組み合わせる:

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

Angular アプリと Go 間の通信を正常に確立する必要がありますAPI。

以上がAngular HTTP ヘッダーと Go CORS の問題をトラブルシューティングする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。