1

I am writing my code in codesandbox and very simply trying to fetch a weather API. I have done numerous API calls in codesandbox and it has always been just fine, except this one.

I ran it in a console and it returns the data just fine too. I seriously cannot understand what is causing this? If someone could take a look and help, that would be super appreciated. Here is the code:

import React, { useState, useEffect } from "react";

const WeekContainer = () => {
  const [data, setData] = useState([]);

  async function getData() {
    const weatherURL = `http://api.openweathermap.org/data/2.5/forecast?zip=11102&units=imperial&APPID=dcadf332823cddfb979926a1414274e8`;
    const result = await fetch(weatherURL);
    const a = await result.json();
    console.log(a)
    setData(a)
  }

  useEffect(() => {
    getData();
  }, []);

  return <div>weekcontainer</div>;
};

export default WeekContainer;

Thanks for your time

5ecured
  • 181
  • 10

1 Answers1

3

Your code is giving below error -

The page at 'https://codesandbox.io/' was loaded over HTTPS, but requested an insecure resource 'http://api.openweathermap.org/data/2.5/forecast?zip=11102&units=imperial&APPID=dcadf332823cddfb979926a1414274e8'. This request has been blocked; the content must be served over HTTPS.

This is because we cannot access HTTP content from a HTTPS Page. Check this - HTTP Ajax Request via HTTPS Page.

You are trying to fetch data from codesandbox which is running on HTTPS and making call to api.openweathermap.org over http. Change API request to https://api.openweathermap.org/data/2.5/forecast?zip=11102&units=imperial&APPID=dcadf332823cddfb979926a1414274e8 and you should be able to fetch the data.

Here is the codesandbox for the same - https://codesandbox.io/s/trusting-hopper-k5s52

Arpitha Chandrashekara
  • 1,087
  • 6
  • 8