VueJS Requested an insecure XMLHttpRequest endpoint

Question

I have a VueJs app with a Laravel backend as the API.

When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.

My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.

The application can be viewed here: https://vehicletrader.sweney.co/#/

Please note at this stage theres is no authorization surrounding the API.

Any advice would help.

Answer 1

A slash / at the end of the request URL was the cause of this for me.

My axios call was a simple axios.post('https://getShafiq.com/hello/') .

Locally, it was working.

But on prod server behind CloudFlare, it would return insecure XMLHttpRequest .

What I noticed in the 'Network' tab of my browser's dev tools is that the URL is returning a 301 - Moved Permanently and right after it, the error about the insecure endpoint.

I removed the / after /hello and boof, it works.