API调用的Angular HttpClient CORS错误

Question

我正在与Angular创建一个基于Web的平台，该平台与Magic Eden API交互（文档： https：//api.magiceden> .dev/）。

请记住，这不是我的API，我只是从我的前端打电话。

当我通过Angular HTTP客户端向API拨打API时，我会出现A CORS错误，指出“在请求的资源上不存在'访问访问控制 - 允许孔'标头。”

cors错误

但是，当我通过Postman进行呼叫时，它可以正常工作，没有任何问题。

我尝试在以下两种方式中添加“访问控制 - 允许孔”标头：

1）

headers = new HttpHeaders().set('Access-Control-Allow-Origin', '**');

getListings(symbol: string)
{
    return this.http.get('https://api-mainnet.magiceden.dev/v2/collections/aos/listings?offset=0&limit=18', {headers: httpOptions.headers});
}

const httpOptions = {
  headers: new HttpHeaders ({
    "Access-Control-Allow-Origin": "**"
  })
}

getListings(symbol: string)
  {
    return this.http.get('https://api-mainnet.magiceden.dev/v2/collections/aos/listings?offset=0&limit=18', httpOptions);
  }

我还尝试将Access-Control-Allow-Origin设置为“*”和“ **”，该Origin不起作用。

我还尝试使用Axiom而不是Angular HTTPClient进行呼叫，但我仍然会遇到相同的错误。

有人知道如何处理吗？ 任何帮助将不胜感激！

Answer 1

尝试在其他端口上运行该应用

Answer 2

为了理解CORS错误，让我们阅读 wikipedia /strong>：

交叉原始资源共享（CORS）是一种机制，允许从提供第一个资源的域之外的另一个域中请求网页上的限制资源。
网页可以免费嵌入交叉原始图像，样式表，脚本，iframe和视频。默认情况下，相同的原始安全策略禁止某些“跨域”请求，尤其是AJAX请求。 ** CORS定义了浏览器和服务器可以进行交互的方式，以确定是否允许交叉原始请求安全。它允许比纯粹的孤子请求更多的自由和功能，但是比简单允许所有交叉原始请求更安全。

简单单词的技术步骤：

1. 客户端（网页）尝试调用服务器端（API）。
2. 服务器检查请求是否具有访问他的许可，如果没有，他会阻止客户端。
3. 由于服务器块，客户端会出现CORS错误。

为了允许客户端访问服务器端，您应该在服务器端启用交叉原始权限。

如果您不能在服务器端添加CORS权限，因为您不是API的所有者，并且不能要求API的所有者将您的站点添加到CORS中，则可以制作自己的服务器代理（例如构建.NET Core Core Backend应用等...）。

• 在您的后端应用中添加CORS定义。

在.NET Core 6：
请参阅此如何在asp.net core中启用cors 以获取更多示例。

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      {
                          builder.WithOrigins("http://example.com",
                                              "http://www.contoso.com");
                      });
});

• 将API调用添加到后端代理中的外部API。
• 您的后端应用程序将是客户端和外部API之间的中介。客户将致电您的代理，代理将调用外部API。