Angular 的 CORS 错误请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我试图从我的服务类中的这个 api 'https://api.alternative.me/fng/?limit=1&format=csv&date_format=us' 中提取一些数据，但我收到了 CORS 错误。 这是完整的错误 CORS 策略已阻止从源“http://localhost:4200”访问位于“https://api.alternative.me/fng/?limit=1&format=csv&date_format=us”的 XMLHttpRequest：对预检请求的响应不t 通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这里是服务班

const httpOptions = {
  headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Access-Control-Allow-Origin': '*' ,
  })
};

 @Injectable({
  providedIn: 'root'
 })
 export class CryptoCoinsService {
 constructor(private http: HttpClient) { }

   fng: string = 'https://api.alternative.me/fng/?limit=1&format=csv&date_format=us';

   getFng(): Observable<any[]> {
    return this.http.get<any[]>(this.fng, httpOptions);
   }
  }

在我的 component.ts 文件中

 ngOnInit(){
   this.getFng();
 }

getFng() {
  this.cryptoCoinService.getFng()
  .subscribe((data:any) => {
    this.fng = data;
  })
 }

我已经测试过以这种方式从 coingecko api 中提取数据并且它工作正常。

service.ts 文件

 api: string = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=20&page=1&sparkline=false';

getCoinData(): Observable<Coin[]> {
 return this.http.get<Coin[]>(this.api, httpOptions);
}

component.ts 文件

  ngOnInit(): void {
   this.getTopCoins();
  }

 getTopCoins() {
  this.cryptoCoinService.getCoinData()
   .subscribe(data => {
     this.topCoins = data;
   });
  }

我已经阅读了 CORS 错误，所以我知道 api 不在同一个域中，这就是我收到错误的原因。我试图创建一个代理，我不确定它是否正确，但我已经为目标和 /fng 尝试了一堆组合。

{
  "/fng":{
     "target": "https://api.alternative.me",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
 }
}

错误还说请求的资源上不存在“Access-Control-Allow-Origin”标头。 但是我的标题包含该选项作为'*'

任何人都可以向我解释我做错了什么以及如何解决它吗？谢谢。

Answer 1

看起来您正在尝试从 Angular 应用程序访问 API 端点https://api.alternative.me/fng/?limit=1&format=csv&date_format=us，但您收到了 CORS 错误。当来自一个域的网页试图访问来自另一个域的资源时，会发生此错误。

CORS 是 Web 浏览器中实现的一项安全功能，用于防止跨域请求。为了从不同的域访问 API 端点，服务器必须通过在响应中设置“Access-Control-Allow-Origin”标头来明确允许它。

在您的情况下，托管 API 端点 https://api.alternative.me 的服务器似乎不允许来自托管在 http://localhost:4200 的 Angular 应用程序的跨域请求。这就是为什么您收到错误“请求的资源上不存在‘Access-Control-Allow-Origin’标头”的原因。

要解决此问题，您可以：

联系服务器管理员并要求他们为您的域启用 CORS。他们可以通过在响应中将“Access-Control-Allow-Origin”标头设置为您的域来做到这一点。这对本地主机来说似乎不可行。

使用代理服务器从您的 Angular 应用程序发出请求。代理服务器充当 Angular 应用程序和 API 服务器之间的中间人，允许您绕过 CORS 限制。要在 Angular 中设置代理，您需要在项目目录的根目录中创建一个名为 proxy.conf.json 的文件，其中包含以下内容：

 {
  "/api": {
    "target": "https://api.alternative.me",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

此配置告诉 Angular 将任何对 /api 的请求转发到 https://api.alternative.me，并重写请求的路径，使其与您要访问的 API 端点匹配（/fng/?limit =1&format=csv&date_format=us).

然后，更新您的服务类以使用新的 API 端点 URL：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})
export class CryptoCoinsService {
  constructor(private http: HttpClient) {}

  fng: string = '/api/fng/?limit=1&format=csv&date_format=us';

  getFng(): Observable<any[]> {
    return this.http.get<any[]>(this.fng, httpOptions);
  }
}

请注意，我们从 httpOptions 中删除了 Access-Control-Allow-Origin 标头，因为在使用代理服务器时不需要这样做。

最后，使用以下命令启动 Angular 应用程序：

ng serve --proxy-config proxy.conf.json

这将使用您刚刚创建的代理配置启动您的 Angular 应用程序。现在您应该能够访问 API 端点而不会出现 CORS 错误。

希望对您有所帮助！如果您还有其他问题，请告诉我。