Angular 9'Access-Control-Allow-Origin'标头包含多个值

Question

我正在Angular项目中工作，但是当我尝试连接到后端时，出现此错误。

Access to XMLHttpRequest at 'https://url' from origin 'http://localhost:5000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

在项目的某个地方，我将其设置在标题access-control-allow-origin: *中，但不应这样做，因为后端在我打电话时会这样做。 （我只做前端）。唯一的问题是我不知道这在我的项目中发生了什么。我所做的唯一一件事就是在拦截器中向呼叫添加授权令牌。因此，我什至不确定在哪里甚至可以在前端实现access-control-allow-origin: *

这是我的拦截器文件：

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

@Injectable({
  providedIn: 'root',
})
export class InterceptorService implements HttpInterceptor {
  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.auth.getTokenSilently$().pipe(
      mergeMap(token => {
        const tokenReq = req.clone({
          setHeaders: { Authorization: `Bearer ${token}` ,},

        });
        console.log("token:",tokenReq);
        return next.handle(tokenReq);
      }),
      catchError(err => throwError(err))

    );
  }
}

请让我知道是否需要提供更多文件。

Answer 1

该错误可能来自后端。如果要使用Visual Studio代码，则要查找您在代码中编写的任何内容，只需在此处键入即可。

为您的请求提供标题，只需使用angular提供的Httpheaders。获取请求的示例：

import { HttpParams, HttpClient, HttpHeaders } from "@angular/common/http";
@Injectable({
  providedIn: "root"
})
export class BlogHttpService {
  private headers: HttpHeaders;
  private accessPointUrl: string = "http://localhost:3000";
  constructor(private http: HttpClient) {
    this.headers = new HttpHeaders({
      "Content-Type": "application/json; charset=utf-8"
    });
  }
 public getBlogs() {
    return this.http.get(this.accessPointUrl + "/api/blogs", {
      headers: this.headers
    });
  }

希望这对您有帮助：）