Resolve CORS error in Angular for 3rd party API

Question

I have a simple API call to make within Angular using the http client:

  return this.http.get('https://api.someexternalapi.com').pipe(
    map((response) => response),
    catchError(error => of(this.handleError(error))));

I'm trying to make a call to a 3rd party API that I have no control over but I receive the following CORS error:

Access to XMLHttpRequest at 'https://api.someexternalapi.com' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If I paste the request into postman it works.

What do I need to add to my Angular code to get around this?

I've had a look online and the examples are all setting the code on the server side which I have no access to.

GreyBeardedGeek · Accepted Answer · 2023-08-07 09:13:46Z

2

By design, there's nothing that you can do on the client side. The server must return the proper Access-Control-Allow-Origin header for the pre-flight OPTION request, or the browser won't even attempt to make the GET request.

Pretty much the only solution is to set up a server (which is properly configured for CORS) to proxy the request for you.

answered Aug 7, 2023 at 9:13

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Resolve CORS error in Angular for 3rd party API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related