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.