Fetch: has been blocked by CORS policy

I have a vanilla JavaScript project that fetch data from the weather API. The code is provided below -

export const getWeatherFromCoords = async (locationObj) => {
    const lat = locationObj.getLat();
    const lon = locationObj.getLon();
    const units = locationObj.getUnit();

    const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly,alerts&units=${units}&appid=${WEATHER_API_KEY}`;

    try {
        const weatherStream = await fetch(url);

        const weatherJson = await weatherStream.json();
        return weatherJson;
    } catch (err) {
        console.error(err);
    }
}

The app works fine but when I try to debug, I get the error -

has been blocked by CORS policy: Request header field x-ijt is not allowed by Access-Control-Allow-Headers in preflight response.
https:/…ogleapis.com/css2:1

This is the reason I can't debug the app. How do I solve the issue?