API 调用时出现 Angular HttpClient CORS 错误

Question

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

请记住，这不是我的 API，我只是从前端调用它。

当我通过 Angular HTTP 客户端对 API 进行 API 调用时，我收到 CORS 错误，指出“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

CORS 错误

但是，当我通过 Postman 拨打电话时，它可以正常工作。

我尝试通过以下两种方式添加“Access-Control-Allow-Origin”标头：

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 设置为“*”和“**”，但这不起作用。

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

有谁知道如何解决这个问题？ 任何帮助将不胜感激！

Answer 1

尝试在不同的端口上运行应用程序，例如：ngserve --port 4209

Answer 2

为了了解 CORS 错误，让我们阅读 wikipedia 关于 CORS 的内容：

跨源资源共享（CORS）是一种机制，允许从第一个资源提供的域之外的另一个域请求网页上的受限资源。 网页可以自由嵌入跨域图像、样式表、脚本、iframe 和视频。同源安全策略默认禁止某些“跨域”请求，特别是 Ajax 请求。 **CORS 定义了一种浏览器和服务器交互以确定允许跨域请求是否安全的方式。它比纯粹的同源请求提供更多的自由和功能，但比简单地允许所有跨源请求更安全。

简单来说技术步骤：

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

为了允许客户端访问服务器端，您应该在服务器端启用跨域允许。

如果你无法在服务器端添加 CORS 许可，因为你不是 API 的所有者，并且你无法要求 API 的所有者将你的网站添加到 CORS，你可以制作自己的服务器代理，（例如构建一个 .Net Core后端应用程序等...）。

• 在后端应用程序中添加 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。