Hello everyone,
I have a Laravel application with Inertia.js and Vue that I deployed on DigitalOcean Managed App. The deployment went smoothly, but when I navigate between the client-side rendered pages, I get a mixed content error. The error message says "Mixed Content:
The page at 'https://docspot.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://docspot.app/login'. This request has been blocked; the content must be served over HTTPS."
I have checked all the configurations in my .env
file, and everything includes the app URL with https
. I’m not sure what’s causing this error, and I would appreciate any help or guidance on how to resolve it.
Thank you in advance!
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Hey @56da9fe2b90740cc977f19f9bc88e3,
The mixed content error you’re encountering is due to a client-side request being made over HTTP instead of HTTPS.
There are a couple of things you’ll need to check/do to reslove this.
APP_URL
in your.env
file is set to usehttps://
:In your Inertia.js and Vue.js code, verify that all URLs are generated using Laravel helper functions, such as
route()
orurl()
. These helpers will ensure that the URLs are created with the correct scheme, as defined in your.env
file.If you’re using Axios for handling AJAX requests in your Vue.js components, make sure that the
baseURL
for Axios is correctly set. You can do this in yourmain.js
or a separate Axios configuration file:Then, ensure that you have a corresponding variable in your
.env
file:If the issue persists, carefully review your client-side code for any hardcoded URLs with an
http://
scheme and update them accordingly.