Resolve Mixed Content insecure XMLHttpRequest endpoint for HTTPS Content in Axios

Table of Contents

• A lightweight Overview on App Infrastructure
• Axios Code that talks to REST API
• The Problem
• Solution
  • Fix insecure XMLHttpRequest endpoint
• Full Axios code with Fix
• Other method to fix Mixed Content insecure XMLHttpRequest endpoint

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

• 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.