I have a FastAPI server running on Azure Web App with url: https://my-api.azurewebsites.net. I also have a static website running on Azure Static Web App with url: https://myapp.azurestaticapps.net. This web app has GET and POST async apis implemented as follows:

@router.get("/v1/user/{user_id}")
async def get_user(user_id: str):
  # if user exists
  # # return user
  # else
  # # raise HTTPException(status_code=404, detail="User not found")

My static web app is making an async GET call to https://my-api.azurewebsites.net/v1/user with the user_id parameter which is supposed to send a response. If the response is 404 then take certain actions. But, before I can check the response, I’m getting the following error on my static web app:

Mixed Content: The page at 'https://myapp.azurestaticapps.net/dashboard/profile' was loaded over HTTPS, but requested an insecure resource 'http://my-api.azurewebsites.net/v1/user/'. This request has been blocked; the content must be served over HTTPS.

What should I be looking for in order to resolve this issue?