The page at 'website' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'website'

Question

I have the below axios request which is going out over https but I get the error

The page at 'http://websitename/folder1/folder2/api/atlas/home/coach' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://websitename/folder1/folder2/api/user?userid=15'. This request has been blocked; the content must be served over HTTPS.

Axios requestr

loadUser() {    
            this.memberid = this.$route.params.userid;             
            if (axios == null) {
                    return;
                }  
                axios
                .get('https://websitename/folder1/folder2/api/atlas/api/user/', {
                    params: {
                        userid: this.loggedinuser
                        }
                    })
                .then(res => {
                    this.user = res.data.user[0].name;                 
                })
                .catch(err => {
                    console.log(err);
                });
            }

In the network logs, I can see the request URL is going over HTTPS, but the Response header is http in the location field. How would I fix this please?

Answer 1

Adding <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> resolved the issue