How to use Mocky API in reactjs with axios

Question

Can anyone help me out how to call Mocky API in ReactJS by using Axios?

This is my CodeSandbox link : MockyAPIReactJS

I have called the API in context API. just want to console.log data other than that I will handle it.

userData=async()=>{
await axios.get('http://www.mocky.io/v2/5ba8efb23100007200c2750c')
.then(res=>console.log(res.data))
.catch(err=>console.log("UserData Error",err))
}

componentDidMount(){
this.userData()
}

Answer 1

Your code, which is running under the origin https://codesandbox.io/ is trying to make an HTTP request to the origin http://www.mocky.io/ . Most browsers block accessing non-secure URLs in the context of a secure URL, and that's what's happening to you.

Changing http://www.mocky.io/ to https://www.mocky.io/ seems to let the requests go through as this fork shows .

Familiarize yourself with your browser's developer tools, particularly the network tab therein, since that will show you the reasons why requests are blocked.