I following a tutorial at udemy to make weather app. I got stuck in lesson 13 source code can be found here: https://github.com/iamshaunjp/modern-javascript/blob/lesson-102/weather_app/scripts/forecast.js
Here is the course: https://www.udemy.com/course/modern-javascript-from-novice-to-ninja/ (its paid course). There are other students asking the same question in the chat but no update since 2 years ago.
I get this error message:
127.0.0.1/:1 Access to fetch at > 'http://dataservice.accuweather.com/locations/v1/cities/search?> apikey=key_removed&q=manchester' from origin 'http://127.0.0.1:5500' has been blocked > by CORS policy: Response to preflight request doesn't pass access control check: 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.
Here is the code: const key = 'removed_api_key';
// get city information
const getCity = async (city) => {
const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
const query = `?apikey=${key}&q=${city}`;
const response = await fetch(base + query, {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
'Content-Type': 'application/json',
'Access-Control-Allow-Headers': '*'
}
});
const data = await response.json();
return data[0];
};
getCity('manchester')
.then(data => console.log(data))
.catch(err => console.log(err));
How to fix this issue? I have added mode and header that is not in the original code I assume this is something that has changed in web browser after he created the course. I have tried to use mode: 'no-cors' and also set * on 'Access-Control-Allow-Origin' but no luck in solving this issue.