Angular HttpClient调用API时出现CORS错误



我正在用Angular创建一个基于web的平台,它可以与Magic Eden API交互(文档:https://api.magiceden.dev/)。

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

当我让API调用API通过角HTTP客户端我歌珥错误声明"没有提供"Access-Control-Allow-Origin"的头所请求的资源的管理者;

歌珥错误然而,当我通过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设置为"*"one_answers"* *";

    我也试着用Axiom而不是Angular的HttpClient进行调用,我仍然得到相同的错误。

    有人知道怎么处理这个吗?任何帮助将不胜感激!

    为了理解CORS错误,让我们看看维基百科对CORS的描述:

    跨域资源共享(Cross-origin resource sharing, CORS)是一种机制,它允许从提供第一个资源的域之外的另一个域请求web页面上受限的资源。网页可以自由地嵌入跨源图像、样式表、脚本、iframe和视频。某些"cross-domain"默认情况下,同源安全策略禁止请求,尤其是Ajax请求。**CORS定义了一种浏览器和服务器可以交互的方式,以确定是否允许跨域请求是安全的。它比纯粹的同源请求允许更多的自由和功能,但比简单地允许所有跨域请求更安全。

    技术步骤用简单的话来说:

    1. 客户端(一个网页)尝试调用服务器端(API)
    2. 服务器检查请求是否有访问权限,如果没有,则阻塞客户端。
    3. 客户端收到CORS错误,因为服务器阻塞。

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

    如果你不能在服务器端添加CORS权限,因为你不是API的所有者,你不能要求API的所有者将你的网站添加到CORS,你可以自己制作服务器代理,(如构建。net Core后端应用程序等…)

    • 在后端应用程序中添加CORS定义。

    在。net Core 6中:
    参见如何在ASP中启用CORS。. NET Core查看更多示例。

    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。

    相关内容

    • 没有找到相关文章

    最新更新