Cors 调用第三方API时处理COR

是的，这是一个非常著名的问题，我尝试过前面堆栈溢出QnA中提到的许多方法，但都没有效果。我试图在我的应用程序中使用API，但它给出了以下错误

这是我的服务类代码

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{Observable}；
从'@angular/common/http'导入{HttpHeaders}；
@可注射（{providedIn:“根”}）
导出类PriceTableService{
私有价格URL=”https://banzaicloud.com/cloudinfo/api/v1/providers/google/services/compute/regions/asia-east2/products"
//私有价格URL=”https://jsonplaceholder.typicode.com/posts"
构造函数（私有http:HttpClient）{}
httpOptions={
标题：新的HttpHeaders({
“访问控制允许方法”：“删除、发布、获取、选项”，
“访问控制允许标头”：“内容类型，访问控制允许标头，授权，X请求的带”，
“内容类型”：“应用程序/json”，
“访问控制允许来源”：http://localhost:4200'
})
};
getPrices（）{
this.http.get（this.priceurl，this.httpOptions）.subscribe（结果=>{
控制台日志（结果）；
返回（结果）；
})
}
恩戈尼尼特（）{
}
}

---

这在

POSTMAN

和

CHROME

中有效，但无法将数据输入到我的angular应用程序中，当我用任何其他伪URL替换URL时，我可以获取数据，但上述API没有提供数据，如果有人能帮我解决这个问题，那将是一个很大的帮助。

首先，您需要了解CORS检查是由浏览器完成的。这是一个W3C规范。像Postman这样的任何扩展或工具都不受此限制。这就是你通过邮递员得到结果的原因

另一件事是，您已经尝试向请求添加访问控制Allow Origin头。这不是CORS规范所期望的。您需要在响应中使用Access Control Allow Origin标头。这意味着它需要由服务器端添加

由于您正在调用第三方API，我相信您无法控制服务器。因此，要求通过设置访问控制允许来源来处理CORS问题是不可能的

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

通过在浏览器中禁用CORS检查（不建议用于生产）

通过在浏览器中使用CORS插件（不推荐用于生产）

通过代理请求资源—最简单的方法是，您可以编写一个小型节点服务器（或者，如果您已经有一个后端，则可以使用它）来请求第三方API并发送回响应。现在，在服务器响应中，您可以允许跨源标头

根据第三种方式，我用express制作了一个小型节点服务器，并使用以下代码调用

const express=require('express');
const request = require('request');
const app=express();

app.get('/data',(req,res,next)=>{
    request('https://banzaicloud.com/cloudinfo/api/v1/providers/google/services/compute/regions/asia-east2/products',
     function (error, response, body) {
         res.send(body)
    });  
});
const port =process.env.port || 3000;
app.listen(port,()=>{
    console.log(`From port ${port}`);
});

---

然后您可以使用

http://localhost:3000/data

在前端获取数据。

检查标题。您可能正在发送外部API不喜欢的标题（如

授权

等），这可能会导致此错误。

此崩溃CORS为我节省了大量时间。并非所有第三方API都允许跨源，而不是重定向，您可以将URL更改为后端，并在响应后返回到源端点以进行下一步