Resolve Mixed Content insecure XMLHttpRequest endpoint for HTTPS Content in Axios

A lightweight Overview on App Infrastructure

I had a REST api written in FastAPI using Python and hosted over Azure with default https enabled that comes with Azure’s basic App Service Plan.

I hosted the client app on netlify’s $0/month starter plan . The client app is a framework7-vue based web app that uses axios to talk to the REST api hosted on azure and enabled CORS with the following setup.

Axios Code that talks to REST API

import axios from 'axios'
    const apiurl = 'https://my-wonderful-restapi.azurewebsites.net'

    export default {
        getItems(){
            return axios.get(apiurl+'/items/')
                        .then(resp=>{
                            return resp.data
                        })
        },
        getOrderById(id){
            return axios.get(apiurl + '/orders?queryparam='+ id)
                        .then(resp=>{
                            return resp.data
                        })
        }
    }

The Problem

Though both of my web app and REST api are hosted with https, only getItems() api call worked whereas the calls to getOrdersById() api logs error that says:

Mixed Content: The page at ‘https://some-random-sub-domain.netlify.com‘ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://my-wonderful-restapi.azurewebsites.net/orders/?queryparam=1‘. This request has been blocked; the content must be served over HTTPS

When I troubleshot for some time, I realized that I’m missing a trailing / (forward slash) between rest endpoint and query parameter that lead to Mixed Content insecure XMLHttpRequest endpoint.🤦‍♂️

If you notice in the above snippet,between https://my-wonderful-restapi.azurewebsites.net/orders and query parameters ?queryparam= there is a missing forward slash / for the getOrdersById() endpoint.

Solution

Fix insecure XMLHttpRequest endpoint

After modifying the api GET request from

apiurl + '/orders?queryparam='+ id   //<-- notice the /orders which failed processing request

to the following

apiurl + '/orders/?queryparam='+ id  //<-- notice the /orders/

Full Axios code with Fix

So the full source code looked like this. The trailing slash resolved Mixed Content insecure XMLHttpRequest endpoint for HTTPS Content in Axios.

    import axios from 'axios'
    const apiurl = 'https://my-wonderful-restapi.azurewebsites.net'
    export default {
        getItems(){
            return axios.get(apiurl+'/items/')
                        .then(resp=>{
                            return resp.data
                        })
        },
        getOrderById(id){
            return axios.get(apiurl + '/orders/?queryparam='+ id)
                        .then(resp=>{
                            return resp.data
                        })
        }
    }

I got rid of the error.🤘

Other method to fix Mixed Content insecure XMLHttpRequest endpoint

  1. How to fix Mixed Content insecure XMLHttpRequest endpoint

    Some hosts ensure a trailing forward slash / is present in the https requests with CORS enabled. If you see the similar error but you already had a trailing forward slash, then try removing the forward slash and see if it worked for you.

Navule Pavan Kumar Rao

Hi, I am am Engineering Manager with product development experience in the health care services, banking, finance, corporate tax, and automobile domains. I am a published author for the book 'Getting Started with V Programming'. I pursued Executive M.Tech in Data Science from the Indian Institute of Technology (IIT), Hyderabad. I also pursued Executive MBA in IT specialization from the Indian School of Business Management and Administration, and also holds a B.Tech in Electronics and Communication Engineering from Vaagdevi Institute of Technology and Science. I am a Microsoft Certified Professional (MCP) and Microsoft Certified Technology Specialist (MCTS). I played key roles in identifying business requirements and converting them into viable products with the help of his vast software development skills. I also played a key role in the architecting, development, and deployment of software applications that become a part of the CI/CD pipeline to cloud platforms such as Azure, GCP, AWS and also to on-premise infrastructures. Check out my book "Getting Started with V Programming" Checkout my book here: https://amzn.to/3FOsxSm
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
AffiliateLabz
AffiliateLabz
2 years ago

Great content! Super high-quality! Keep it up! 🙂

Jan Schweiger
Jan Schweiger
1 year ago

Thank you! Saved my day