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 인터셉터를 사용하여 요청에 인증 헤더를 추가하고 보호하기 위해 Guard를 사용하는 것이 좋습니다. 경로.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!