My Quote can run locally but not in Vercel

[FarhanMuftiHilmy]

I'm using react axios to call this api, here is the code

import React, { useState, useEffect } from 'react'
import axios from "axios"

export default function Quote() {
    const [quote, setQuote] = useState("");
    const [author, setAuthor] = useState("")
    const quoteAPI = async () => {
        let arrayOfQuotes = [];
        try{
            const data = await axios.get("http://api.quotable.io/random")
            arrayOfQuotes = data.data;
        } catch(error){
            console.log(error)
        }

        try{
            setQuote(arrayOfQuotes.content)
            setAuthor(arrayOfQuotes.author)
        } catch(error){
            console.log(error)
        }
    }

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

  return (
    <div className="quotes">
        <div className="word">
            {quote}
        </div>
        <div className="author">
            {author}
        </div>
        <div class="d-flex justify-content-center">
            <a class="btn btn-secondary btn-xl text-center " onClick={quoteAPI}><i class="fas fa-redo-alt"></i></a>
        </div>
    </div>
  )
}

it ran perfectly when i ran it locally, but when i deployed it to vercel and visited the site, the quote wasn't showing, any clue?

[lukePeavey]

When you load the deployed version of the site, are there any errors is the console?

[lukePeavey]

I think I see the problem... you are using the non-secure URL, so the request is probably getting blocked. Try using HTTPS instead of HTTP

- const data = await axios.get("http://api.quotable.io/random")
+ const data = await axios.get("https://api.quotable.io/random")

live example

[lukePeavey]

I'm going close this, but feel free to comment if you are still having trouble.