Circumvent CORS when Accessing a Third-Party API using Netlify Functions

Share this video with your friends

Send Tweet

CORS limits websites from communicating with other domains without the full consent of both sites. Consuming data from a 3rd Party REST API makes it difficult since we can't properly configure the appropriate CORS headers. To solve this, we'll set up a proxy server to request the data using a Netlify function that avoids CORS altogether.

The Third-Party API that we'll be working with will provide the following data: id, name, favoriteSong for each corgi.

http://no-cors-api.netlify.app/api/corgis

We will also use node-fetch a light-weight module that brings the fetch API to fetch the data into our application.