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: Created a container registry Tagged Docker images 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.

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

Ruddy Simonpour 0

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:

Created a container registry
Tagged Docker images
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.

Shree Hima Bindu Maganti 1,585 Reputation points Microsoft Vendor

2024-12-24T00:39:53.0466667+00:00
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
Shree Hima Bindu Maganti 1,585 Reputation points Microsoft Vendor

2024-12-24T18:56:41.5666667+00:00

Hi Ruddy Simonpour ,

Following up to see if you have chance to check my previous response and help us with requested information is helpful.

Share via

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

Your answer