Fetch: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"

Hej,

mam napisany poniższy kod i pokazuję mi się następujący error:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Nie wiem niestety gdzie w tym miejscu jest błąd.
Gdy zamianę "response.json()" na "response" to następnie dostaje obiekt Response z którym nic nie mogę zrobić.

function App() {
	const APIkey = "67fccf071e4c18dd1da570918ad48e4a";
	const city = "London";

	const api = `api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIkey}`;

	const handleFetch = () => {
		fetch(api)
			.then((response) => response.json())
			.then((data) => console.log(data))
			.catch((error) => console.log(error));
	};

	return (
		<div className="App">
			<button onClick={handleFetch}>Klik</button>
		</div>
	);
}

Bo tu nie ma problemu z kodem. Dostajesz od API coś, co nie jest JSONem. Wciśnij F12 i szukaj problemu.

W odpowiedzi dostaję obiekt Response

i nie wiem jak z nim dalej pracować.
Nie ma nigdzie informacji które mogłyby pomóc dostać się do potrzebnych danych.

Dodatkowo gdy w przeglądarce wrzucę "api.openweathermap.org/data/2.5/weather?q=London&appid=67fccf071e4c18dd1da570918ad48e4a" to wyskakują mi te dane których potrzebuje.

Ja po wpisaniu poniższego kodu:

function App() {
    const APIkey = "67fccf071e4c18dd1da570918ad48e4a";
    const city = "London";

    const api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIkey}`;

    const handleFetch = () => {
        fetch(api)
            .then((response) => response.json())
            .then((data) => console.log(data))
            .catch((error) => console.log(error));
    };

    handleFetch();
}
App();

otrzymałem prawidłową odpowiedź:

Jedyne co zmieniłem, to:

• dodałem https:// do zmiennej api
• zamiast return wstawilem wywolanie funkcji handleFetch.

Mam nadzieję, że pomoże.
Pozdrawiam