angularcorshttp-headersangular-httpclient

Angular HttpClient CORS Error With API Calls

I'm creating a web based platform with Angular that interacts with the Magic Eden API (documentation: https://api.magiceden.dev/).

Please keep in mind this is not my API, I'm merely making calls to it from my front end.

When I make API calls to the API through the Angular HTTP Client I get the a CORS error stating "No 'Access-Control-Allow-Origin' header is present on the requested resource."

CORS Error

However, when I make the calls through Postman it works without any issue.

I have tried adding the 'Access-Control-Allow-Origin' header in the following 2 ways:

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);
  }

I have also tried setting the Access-Control-Allow-Origin to "*" and "**" which didn't work.

I also tried making the calls with Axiom instead of the Angular HttpClient and I still get the same error.

Does anyone know how to approach this? Any assistance would be appreciated!

Solution

  • In order to understand CORS errors, lets read what wikipedia writes about CORS:

    Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy. **CORS defines a way in which a browser and server can interact to determine whether it is safe to allow the cross-origin request. It allows for more freedom and functionality than purely same-origin requests, but is more secure than simply allowing all cross-origin requests.

    The technical steps in simple words:

    1. The client side (a web page) try to call the server side (API).
    2. The server check if the request has a permition to access him, and if not he block the client.
    3. The client get CORS error because of the server block.

    In order to allow the client accessing the server side you should enable a cross-origin permition in the server side.

    If you cant add a CORS permition in the server side because you are not the owner of the API and you cant ask the API's owner to add your site to CORS, you can make your own server proxy, (like build a .Net Core backend app etc...).

    In .NET Core 6:
    See this How to enable CORS in ASP.NET Core for more samples.

    var builder = WebApplication.CreateBuilder(args);

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