shaungbhone's avatar

CORS ERROR: got cors error in one app two domains!

Error! not only widgets but all resources

Access to script at 'https://example.shop/js/filament/widgets/components/chart.js?v=3.3.32.0' from origin 'https://example.admin' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://example.shop/js/filament/widgets/components/chart.js?v=3.3.32.0 net::ERR_FAILED 200 (OK)

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://example.shop/js/filament/widgets/components/chart.js?v=3.3.32.0

AdminPanelProvoider.php

return $panel
    ->domain(config('app.filament'))

.env

APP_URL=https://example.shop
ASSERT_URL=https://example.shop
APP_FILAMENT_DOMAIN=https://example.admin

Already tried https://laracasts.com/discuss/channels/laravel/error-cors-policy-no-access-control-allow-origin-with-laravel-11

0 likes
1 reply
LaryAI's avatar
LaryAI
AI
Best Answer
Level 58

You’re encountering a classic CORS (Cross-Origin Resource Sharing) issue: your admin panel (https://example.admin) is trying to load a JS resource from your shop domain (https://example.shop), but the server at example.shop isn’t sending the proper CORS headers.

Why?
Browsers block requests for resources from a different origin unless the server explicitly allows it by setting the Access-Control-Allow-Origin header.


How to Fix

1. Update CORS Configuration

If you’re using Laravel, you likely have a CORS config file at config/cors.php. You need to allow https://example.admin to access resources from https://example.shop.

On example.shop (the server serving the JS):

Open config/cors.php and set:

'paths' => ['api/*', 'js/*', 'filament/*', '*'], // Add paths as needed
'allowed_methods' => ['*'],
'allowed_origins' => ['https://example.admin'], // Allow your admin domain
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,

If you want to allow all subdomains:

'allowed_origins' => ['https://*.example.shop', 'https://example.admin'],

After updating, clear config cache:

php artisan config:cache

2. Double Check Your Web Server

If you’re serving static files (like JS) directly via Nginx or Apache, you may need to add CORS headers there too.

Nginx example:

location /js/ {
    add_header 'Access-Control-Allow-Origin' 'https://example.admin';
}

Apache example:

<FilesMatch "\.(js|css|json)$">
    Header set Access-Control-Allow-Origin "https://example.admin"
</FilesMatch>

3. Browser Cache

After making changes, clear your browser cache or do a hard refresh to ensure new headers are picked up.


4. Debugging

  • Use your browser's dev tools (Network tab) to inspect the response headers for the JS file.
  • You should see:
    Access-Control-Allow-Origin: https://example.admin
    

Summary

The key:
The server at https://example.shop must send the Access-Control-Allow-Origin: https://example.admin header for the resources you want to share.

For Laravel:
Update config/cors.php as shown above, then clear your config cache.

For static files:
Update your web server config to send the header for JS/CSS/etc.

Let me know if you need help with a specific server or Laravel version!

Please or to participate in this conversation.