Laravel Vite: Assets blocked/Mixed Content issues in production environment

Question

I'm hosting my App on an EC2-instance behind an Elastic Load Balancer which manages my SSL-Certificate. On this EC2-Instance my nginx-configuration is redirecting all http-Requests to https. I recently switched to Vite which caused me a lot of trouble. When I push my app to the server after calling npm run build my assets are blocked. In the browser console I get:

Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...

My Setup:

vite.config.js

export default defineConfig({
    server: {
        host: 'localhost',
    },
    plugins: [
        laravel([
            'resources/assets/sass/app.sass',
            // etc...
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Setting "https: true" in the server-block didn't help me.

.env

APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com

In my blade template I'm using the Vite-directive:

@vite('resources/assets/sass/app.sass')

I tried the following solutions:

• Setting $proxies = '*' in TrustProxies.php, which doesn't have any effect.
• Setting URL::forceScheme('https'); in AppServiceProvider.php, which will load the assets but lead to a lot of other issues.

Somehow the @vite-directive is not resolving my assets as secure assets. With Laravel Mix I could just call secure_asset.

How can I fix this?

Answer 1

If you are using Laravel with the laravel-vite-plugin,

I solved this in a similar use case by adding:

ASSET_URL=https://example.com

You can also add

APP_URL=https://example.com

for consistency.