yes this is a very famous question , I have tried many ways mentioned in the previous stack-overflow QnA, but nothing worked. I am trying to use BANZAI-Cloud API in my application , but it gives the following error
这是我的服务类代码
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { HttpHeaders } from '@angular/common/http';
@Injectable({providedIn:"root"})
export class PriceTableService{
private priceurl = "https://banzaicloud.com/cloudinfo/api/v1/providers/google/services/compute/regions/asia-east2/products"
// private priceurl = "https://jsonplaceholder.typicode.com/posts"
constructor(private http:HttpClient){}
httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Methods':'DELETE, POST, GET, OPTIONS',
'Access-Control-Allow-Headers':'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin':'http://localhost:4200'
})
};
getPrices(){
this.http.get(this.priceurl,this.httpOptions).subscribe(result=>{
console.log(result);
return(result);
})
}
ngOnInit() {
}
}
this API工作于POSTMAN and CHROME但当我用任何其他假冒的 URL 替换 URL 时，无法将数据获取到我的角度应用程序中API我可以获取数据，但是上面提到的 API 没有提供数据，如果有人可以帮助我解决这个问题，那将是一个很大的帮助。
首先，您需要了解 CORS 检查是由浏览器完成的。这是 W3C 规范。任何扩展或工具（例如 Postman）都不受此约束。这就是您通过 Postman 获得结果的原因。
另一件事是，您尝试将 Access-Control-Allow-Origin 标头添加到请求中。这不是 CORS 规范所期望的。您需要在响应中包含 Access-Control-Allow-Origin 标头。这意味着它需要由服务器端添加。
由于您正在调用第 3 方 API，因此我相信您无法控制服务器。因此，要求通过设置 Access-Control-Allow-Origin 来处理 CORS 问题是不可能的。
假设您无权访问服务器，可以通过 3 种方法解决此问题。
通过在浏览器中禁用 CORS 检查（不建议用于生产）。
通过在浏览器中使用 CORS 插件（不推荐用于生产）。
通过代理请求资源 - 最简单的方法，你可以做的是，编写一个小型节点服务器（或者如果你已经有一个后端将其与你的前端关联起来，你可以使用它）来执行请求3rd 方 API 并发回响应。现在，在该服务器响应中，您可以允许跨源标头。