CORS Error caused by JS files being requested by http in an https environment using Laravel Filament with Sail / Docker

Question

Environment: Laravel with Filament on Docker (Laravel Sail)

The request is made using https:// but there are 2 files (table.js and select.js) which seem to be being requested by http:// which is causing the following CORS error:

Access to script at 'http://test.docker.localhost/js/filament/forms/components/select.js?v=3.2.50.0' from origin 'https://test.docker.localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
async-alpine.js?v=3.2.50.0:1 
        

GET http://test.docker.localhost/js/filament/forms/components/select.js?v=3.2.50.0 net::ERR_FAILED

Answer 1

This is caused due to reverse-proxying and the app thinking that it is being served by http when actually it's being served by https.

The following can be added to the bootstrap/app.php file in Laravel 11+ to resolve this:

    ->withMiddleware(function (Middleware $middleware) {
        $middleware->trustProxies(at: [
            // proxy ips as array
        ]);
    })

Reference: https://laravel.com/docs/11.x/requests#configuring-trusted-proxies