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

[bblumenfelder]

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 'domain.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://domain.com
ASSET_URL=https://domain.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?

[flexchar]

@bblumenfelder have you figured out anything?

[RyanPaiva56]

I'm also running into this issue. If anyone familiar with Laravel's implementation of vite wants to point me in the right direction, I'm happy to fix the issue and send a pull request.