Filament•16mo ago

Using domain causes CORS issues

I have built a brand-new V3 admin using a custom (sub)-domain. However, I get a CORS error when using certain functionality, because JS for them are loaded using asset() which looks at the .env APP_URL, which is the main applications URL, not my subdomain. How can I fix this?

34 Replies

Shaung Bhone•16mo ago

https://laravel.com/docs/10.x/vite#custom-base-urls

trovsterOP•16mo ago

That will change it for my main site as well, which is not what I want.

Dhruva•16mo ago

I am also facing same issue for sub domains.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.)

Please help.

awcodes•16mo ago

This is related to laravel. Please look into how to set up CORS for subdomains.

trovsterOP•16mo ago

Yes and no. IMO, assets for the filament panel should respect the domain in which the panel is set up. Strangely, most CSS/JS is loaded from the APP_URL domain (not the filament domain) but only a few threw up CORS issues.

toeknee•16mo ago

Again this is really a Laravel issue, we don't want to be manipulating the laravel cors domains by default. IF you are using multiple domains, you need to set the domains which can be used to render etc with the laravel cors settings.

trovsterOP•16mo ago

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.trovster.test/js/filament/forms/components/select.js?v=3.0.8.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.trovster.test/js/filament/forms/components/select.js?v=3.0.8.0. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

But the cors config has 'paths' => ['*'],… I guess because this is a static asset and not going through PHP. Assets work fine, but not when alpine tries to include them.

Uncaught (in promise) TypeError: error loading dynamically imported module: https://www.trovster.test/js/filament/forms/components/select.js?v=3.0.8.0 3 async-alpine.js:1:2403

Uncaught (in promise) TypeError: error loading dynamically imported module: https://www.trovster.test/js/filament/forms/components/select.js?v=3.0.8.0 3 async-alpine.js:1:2403

toeknee•16mo ago

What is requesting it? Ahh I see

trovsterOP•16mo ago

Adding searchable() to a SelectFilter

toeknee•16mo ago

You need to add serverside CORS Because you are requesting the file directly it's not going through laravel cors so it is missing *

trovsterOP•16mo ago

So, not "server-side" but web-server level.

toeknee•16mo ago

Which is indeed handled in the server-side

Dhruva•16mo ago

@trovster are you able to find solution for this issue?

trovsterOP•16mo ago

@dhruva81 not at the moment, but I am investigating it. You can solve it with htaccess if you use Apache or else would be handled with nginx or whatever webserver you're using. This seems to work…

->domain(value(static function (): string {
    $domain = 'https://subdomain.example.com';
    URL::forceRootUrl($domain);
    return $domain;
}))

->domain(value(static function (): string {
    $domain = 'https://subdomain.example.com';
    URL::forceRootUrl($domain);
    return $domain;
}))

awcodes•16mo ago

you really should handle this at the server level and not the application level as it's a CSP issue.

trovsterOP•16mo ago

With nginx or Apache?

awcodes•16mo ago

either it's the same concept regardles

trovsterOP•16mo ago

Yeah, sorry, I meant with the webserver, whichever you have running.

awcodes•16mo ago

some good information at https://content-security-policy.com/

Content-Security-Policy (CSP) Header Quick Reference

CSP or Content Security Policy Header Reference Guide and Examples

trovsterOP•16mo ago

Ah, yes, that fun. I remember adding these to AWS following a security audit.

Travis•15mo ago

I've also suddenly experienced similar problems....in a Laravel vapor environment. For all filament JS assets, they are "blocked:csp" all of the sudden. Thursday's deployment was v2...and worked fine. Today's deployment was after an upgrade to v3, and it fails to load the resources. The assets that fail to load are JS assets that use our cloudfront URL instead of our actual subdomain/domain URL. Livewire, for example, loads from our subdomain/domain and not the cloudfront URL. I suspect this is the problem...but I'm not exactly sure how to resolve it. It seems something has changed between v2 and v3 that makes loading these assets (by the way it determines the asset URLs) behave differently.

awcodes•15mo ago

in v3 the assets for filament get published to the public directory, they are no longer served through php

Travis•15mo ago

Ah...so this is the change that I've missed. I think I need to manually set ASSET_URL for each Vapor environment....to our own subdomain/domain URL and not the cloudfront URL that it's currently set to...by Vapor.

awcodes•15mo ago

sounds right, but I haven't worked with Vapor so I don't know. LOL.

Travis•15mo ago

LOL! It's great in many ways, but it has its own quirks, too....always learning something. 😅 Thx, btw. I'll let you know if this works out. Today seems to be filled with a lot of fires, so I can't get back to it just yet. 😜

awcodes•15mo ago

no worries, hope you get it sorted. and get the fires out.

Travis•15mo ago

No luck... Looks like I need to set my content security policy, which I'm trying to do via spatie's laravel-csp package....but, it doesn't seem to be doing the trick. The header's set, but it appears to be set via vapor/aws and it's not respecting/allowing the laravel-csp directives to be set. So...the search goes on....

awcodes•15mo ago

gross. 🤣

trovsterOP•15mo ago

You can't use a PHP/Laravel solution for the CORS issue with these files. The header needs to be set on the webserver. I resolved this with .htaccess on the server (and nginx via Valet locally). But then I got issues with "double headers" being sent as Laravel has CORS configured to. I had to use the following;

<IfModule mod_headers.c>
    <FilesMatch "\.(?i:css|js)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

<IfModule mod_headers.c>
    <FilesMatch "\.(?i:css|js)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

It would be so much nicer if the assets were loaded from the ->domain() value.

toeknee•15mo ago

Yep it's a PITA you need to use it on the mod security or if using Nginx, there. And apply the policies that way/

Travis•15mo ago

Thx for your input. I'm not so much worried about CORS at the moment as I am CSP. Are you suggesting that there's nothing I can do for either...? 🤔 I'm doing this in a Laravel Vapor environment, which presents its own unique set of challenges, fwiw.... 😒 OK....fwiw, I found a solution. It works fine with Spatie's laravel-csp. The problem was that we have some middleware that was overwriting the CSP header. Once that was addressed, it worked perfectly. 🤓

diegslapasteque•15mo ago

Hello everyone 👋 I faced the same issue, and I found a solution to serve assets using the new domain if you're interested in : 1 - Create a new FILAMENT_ASSET_URL=https://admin.example.com in your .env. 2 - Add a new configuration value in config/filament.php :

'asset_url' => env('FILAMENT_ASSET_URL')

'asset_url' => env('FILAMENT_ASSET_URL')

3 - Add this code at the beginning of AdminPanelProvider to replace the asset url at runtime :

if (config('filament.asset_url')) {
    config(['app.asset_url' => config('filament.asset_url')]);
}

if (config('filament.asset_url')) {
    config(['app.asset_url' => config('filament.asset_url')]);
}

It's not mandatory to create a dedicated environment variable like I did, but I prefer to do it to keep the same behavior than laravel that also have a dedicated ASSET_URL variable. Moreover, if the assets are stored on a CDN or something like that, it will be easy to change the FILAMENT_ASSET_URL too. Maybe I should create a PR to propose to add a new ->assetUrl() method in the Filament\Panel, or to directly change the app.asset_url when a ->domain() is called... Hope it will helps

Anik•11mo ago

anyone done this for images as well? https://discord.com/channels/883083792112300104/1142018245398892554

Anik•11mo ago

https://github.com/filamentphp/filament/discussions/5485#discussioncomment-5427539

GitHub

CORS error using FileUpload with Laravel Sail and Share · filamentp...

I have a FileUpload form component as follows: Forms\Components\FileUpload::make('images') ->image() ->columnSpan('full') ->maxSize(1024) ->multiple() ->maxFiles(5) -...

Gaming

Programming

Using domain causes CORS issues