Question

我不明白为什么，但是无论我做什么，当我向外部API发送请求时，都会收到CORS错误。我该如何解决？

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class YtsService {
  url = 'https://yts.tl/api/v2/list_movies.jsonp';
  headers;

  constructor(
    private http: HttpClient,
  ) {
    this.headers = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    };
  }

  getMovies(): Observable<any> {
    return this.http.get(this.url, { headers: this.headers });
  }
}

API甚至不需要身份验证。

这是我在控制台中看到的错误：

访问“ https://yts.tl/api/v2/list_movies.jsonp”处的XMLHttpRequest 来自来源“ http://localhost:4200”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：否请求中出现“ Access-Control-Allow-Origin”标头资源。

跨源读取阻止（CORB）阻止了跨源响应 https://yts.tl/api/v2/list_movies.jsonp，MIME类型为text / html。看到 https://www.chromestatus.com/feature/5629709824032768了解更多详细信息。

Answer 1

似乎您正在尝试调用jsonp端点，请尝试使用HttpClientJsonpModule模块。可能不是cors问题。

有关示例，请参见以下链接：

Angular jsonp calls

Answer 2

CORS错误来自后端，而不是前端。您所请求的API不允许来自您的来源的请求-可能它不是公共API。您不能在前端采取任何措施来防止CORS错误，因为CORS是由后端实施的安全系统，可以防止出现不需要的请求。

没有外部API出现“ Access-Control-Allow-Origin”标头错误

2 个答案: