cors - 调用第 3 方 API 时处理 CORS

Question

是的，这是一个非常有名的问题，我尝试了之前堆栈溢出 QnA 中提到的许多方法，但没有任何效果。我正在尝试使用 BANZAI-Cloud我的应用程序中的 API，但它给出了以下错误

这是我的服务类代码

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() {
    }
}

此 API在 POSTMAN 工作和 CHROME但是当我用任何其他虚假的 URL 替换 URL 时，无法将数据导入我的 Angular 应用程序 API我可以获得数据，但是上面提到的 API 没有提供数据，如果有人能帮我解决这个问题，那将是一个很大的帮助。

Answer 1

首先，您需要了解 CORS 检查是由浏览器完成的。这是 W3C 规范。任何像 Postman 这样的扩展或工具都不受此约束。这就是您通过 Postman 获得结果的原因。

另一件事是，您尝试向请求添加 Access-Control-Allow-Origin header 。这不是 CORS 规范所期望的。您需要在响应中包含 Access-Control-Allow-Origin header 。这意味着它需要由服务器端添加。

由于您正在调用 3rd 方 API，因此我相信您无法控制服务器。因此，通过设置 Access-Control-Allow-Origin 来要求处理 CORS 问题是不可能的。

假设您无权访问服务器，有 3 种方法可以解决此问题。

通过在浏览器中禁用 CORS 检查(不推荐用于生产)。

通过在浏览器中使用 CORS 插件(不推荐用于生产)。

通过代理请求资源 - 最简单的方法，你可以做的是，编写一个小型节点服务器(或者如果你已经有一个后端将它与你的前端关联，你可以使用它)它会请求3rd 方 API 并发回响应。现在在该服务器响应中，您可以允许跨域 header 。