Angular HTTP 요청에 인증 헤더를 추가하고 CORS 문제를 해결하는 방법은 무엇입니까?

Angular HTTP 요청에 인증 헤더 추가

문제 설명:

Angular HTTP에 인증 헤더 추가 시도 요청했지만 "요청한 항목에 'Access-Control-Allow-Origin' 헤더가 없습니다. 리소스" 오류.

해결책:

Angular 애플리케이션에서는 인증 헤더 관리를 위해 HTTP 인터셉터를 사용하는 것이 좋습니다. 경비대는 경로 보호를 위해 이 접근 방식을 보완할 수 있습니다.

인증 인터셉터 구현:

1. 인터셉터 파일 생성: (예: 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);
  }
}

2. 앱 모듈에 인터셉터 등록:

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

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

Go 관련 HTTP 요청:

오류는 요청 헤더와 CORS 구성이 일치하지 않을 가능성이 있음을 나타냅니다. 다음 단계를 구현합니다.

1. AllowedHeaders 미들웨어 매개변수를 *로 설정하여 모든 헤더를 허용합니다.

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

2. 전송된 헤더와 일치하도록 CORS 설정을 반복적으로 구성합니다. Angular 클라이언트에 의해.

위 내용은 Angular HTTP 요청에 인증 헤더를 추가하고 CORS 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!