How to solve the CORS problem?

Support
, , ,
1

Hi!

I have the dreaded CORS issue. An API I have been using for years now errors our and fails to fetch, and says:
(index):1 Access to fetch at ‘https://api.punkapi.com/v2/beers?page=1&per_page=10’ from origin ‘https://607c7c1f3c7a280007920893--priceless-leakey-11d134.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

The API docs say that CORS is enabled.

In dev mode, the very first fetch IS performed normally and send back the data. But every subsequent fetch errors out with the same message as above.

I checked the Netlify docs and added the following to my .toml file:

[[redirects]]
from = “https://api.punkapi.com/v2/*”
to = “https://api.punkapi.com/v2/:splat”
status = 200

But it doesn’t work. Am I doing this right?

Here is the netlify link:

Many thanks,
Adam

2

The redirect rules are not going to help unless you’re owning Punk API website. And CORS has to be allowed by them, there’s nothing you can do.

As the error suggests, you can try to escape CORS by making your fetch request like:

fetch(url, {mode: 'no-cors'})....

But, I won’t recommend it.