I have two webapp, running on separate containers.

frontend:

https://choukosh.azurewebsites.net/tickets

backend:

https://choukosh-backend.azurewebsites.net/tickets/

when I am trying to call backend, I get the following exception:

Mixed Content: The page at ‘https://choukosh.azurewebsites.net/tickets’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://choukosh-backend.azurewebsites.net/tickets/?size=5’. This request has been blocked; the content must be served over HTTPS.

However, in the code, I am calling over https, not http.

here is the code:

   useEffect(() => {
    const fetchData = async () => {
      console.log("status", status, "author", author);
      try {
        let url = "https://choukosh-backend.azurewebsites.net/tickets?size=5";
        console.log("url", url);
        const response = await axios.get(url);
        setItems(response?.data?.items);
        setPageCount(response?.data?.pages);
        setPage(response?.data?.page);
      } catch (error) {
        toast.error(error.message);
      }
    };

The problem here is, although I am calling over https, and it gets redirected to http for some reason.

❯ curl -I https://choukosh-backend.azurewebsites.net/tickets?size=5

HTTP/1.1 307 Temporary Redirect
Content-Length: 0
Date: Wed, 14 Aug 2024 12:28:34 GMT
Server: uvicorn
Location: http://choukosh-backend.azurewebsites.net/tickets/?size=5

Do I need to configure anything on Azure?