How to Deploy a Flask Backend and Next.js Frontend Together in Azure Web Services

Question

We created an application using Next.js React for the front-end and Flask for the back-end. We successfully developed and tested the app locally using Docker. For deployment in Azure, we:

1. Created a container registry
2. Tagged Docker images
3. Created individual Web App services for backend and frontend

However, during Azure deployment, we encountered a Mixed Content error:

• The frontend page loads over HTTPS
• An API request attempts to connect via HTTP
• Browser blocks the request with the message: "Mixed Content: The page at 'https://xxxxxxxxxx-xxxxxxxxxxxxxxxx.xxxxxxx-01.azurewebsites.net/login' was loaded over HTTPS, but requested an insecure resource '[http://xxxxxxxxxxxx-xxxxxxxxxxxxxxxx.xxxxxxx-01.azurewebsites.net/auth/login]'. This request has been blocked; the content must be served over HTTPS.

Answer 1

Hi Ruddy Simonpour ,

Welcome to the Microsoft Q&A Platform!
The issue Mixed Content issue and successfully deploy your Flask backend and Next.js frontend in Azure Web.
Enforce HTTPS on Both Backend and Frontend

Enable HTTPS Only in Azure Web Apps .Go to Azure portal > Web App > TLS/SSL Settings >Enable HTTPS Only.
Force HTTPS in Flask Backend.

from flask import Flask, request, redirect
app = Flask(__name__)
@app.before_request
def force_https():
    if not request.is_secure:
        url = request.url.replace("http://", "https://", 1)
        return redirect(url, code=301)

Ensure the frontend fetches data via HTTPS.

const BASE_API_URL = process.env.NEXT_PUBLIC_API_URL || "https://your-backend-url.azurewebsites.net";

Add NEXT_PUBLIC_API_URL as an application setting in Azure with the backend HTTPS URL.
Install Flask-CORS
pip install flask-cors
Configure Flask to allow frontend requests:

from flask_cors import CORS
CORS(app, resources={r"/*": {"origins": "https://your-frontend-url.azurewebsites.net"}})

Redeploy the Applications and Push updated Docker images to Azure Container Registry.

Restart both backend and frontend Web Apps in Azure.
Inspect Azure logs via Log Stream and Validate HTTPS requests with Postman.

https://learn.microsoft.com/en-us/azure/app-service/configure-ssl-bindings
https://flask-cors.readthedocs.io/en/latest/
https://learn.microsoft.com/en-us/azure/app-service/manage-custom-dns-buy-domain
If the answer is helpful, please click ACCEPT ANSWER and kindly upvote it so that other people who faces similar issue may get benefitted from it.