Question 97441 in Nginx Question posted in
The official documentation can be found here.

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

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the end I used the TrustedProxies-middleware. However back then I forgot to register it as global middleware.


  2. 0 
    import fs from 'fs';

const host = 'example.com';
server: {
    host,
    hmr: {host},
    https: {
        key: fs.readFileSync(`ssl-path`),
        cert: fs.readFileSync(`ssl-cert-path`),
    },
},

    you should add this to vite.config.js file along with ASSET_URL to your .env file

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search