"Mixed Content Error" with Inertia.js and Vue in Laravel app on DigitalOcean Managed App

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.

1. Make sure the APP_URL in your .env file is set to use https://:

APP_URL=https://docspot.app

2. In your Inertia.js and Vue.js code, verify that all URLs are generated using Laravel helper functions, such as route() or url(). These helpers will ensure that the URLs are created with the correct scheme, as defined in your .env file.

3. 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 your main.js or a separate Axios configuration file:

import axios from 'axios';

axios.defaults.baseURL = process.env.MIX_APP_URL || 'http://localhost:8000';

Then, ensure that you have a corresponding variable in your .env file:

MIX_APP_URL=https://docspot.app

If the issue persists, carefully review your client-side code for any hardcoded URLs with an http:// scheme and update them accordingly.

I had the same problem, this worked for me: https://stackoverflow.com/questions/74990591/laravel-deployed-with-digitalocean-app-http-issue