No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Support
, ,
1

Have the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error. I am new to Netlify and coding in general.

I tried to deploy a weather app (https://kravetskyi-weather-app.netlify.app/) which, of course, fetches weather data from a free API with HTTP protocol. I have a netlify.toml file which looks like this:

[[headers]]
  for = "/*"
    [headers.values]
      Access-Control-Allow-Origin = "*"

a _headers file which looks like this:

/*
  Access-Control-Allow-Origin: *

and a _redirects file:

/api/forecast/* http://api.weatherunlocked.com/api/forecast/:splat 200
/* /index.html 200

Nothing worked so far. Still the error shows: Access to fetch at ‘https://api.weatherunlocked.com/api/forecast/’ from origin ‘https://kravetskyi-weather-app.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.

At this point I am not sure what else to do.

Here is the repo for the app in case it might help: GitHub - Kravetskyi/weather-app

2

You need just the redirects that you’ve shown and then in the frontend, you need to make a call to /api/forecast and not https://api.weatherunlocked.com/api/forecast/.