CORS error because of different origins

1. In Chrome, press F12 to bring up Developer tools
2. Click on Network tab
3. Check Preserve log
4. Check Disable Cache
5. Press the Clear button
6. Load the problematic https://mydomain.com/assets/fonts/
7. Click on the first URL that appears in the Developer tools
8. Under Headers, expand Response Headers, copy everything and paste them here

@lara_guy I don't recall you needing to have the /* on your allowed_origins

'allowed_origins' => ['https://www.mydomain.com/*', 'https://mydomain.com/*', 'http://www.mydomain.com/*', 'http://mydomain.com/*'],

should be:

'allowed_origins' => ['https://www.mydomain.com', 'https://mydomain.com', 'http://www.mydomain.com', 'http://mydomain.com'],

These are the response headers for problematic font when it gets error:

accept-ranges: bytes
cache-control: public, max-age=604800
content-length: 51652
content-type: font/ttf
date: Thu, 01 Oct 2020 08:49:06 GMT
expires: Thu, 08 Oct 2020 08:49:06 GMT
last-modified: Mon, 10 Sep 2001 17:44:00 GMT
server: LiteSpeed
status: 200

Removing /* doesn't solve the problem eigther.

@lara_guy your headers do not have any allowed_origins, that's the problem. It indicates the middleware you installed doesn't seem to be working.

I will try clearing all the cache and routes to see if it helps.

php artisan cache:clear
php artisan config:clear
php artisan event:clear
php artisan optimize:clear
php artisan route:clear
php artisan view:clear

Use chrome to troubleshoot until you see allowed_origins, then proceed to actually test the CORS. I would use XDebug for situations like this.. in fact, I use XDebug for all situations. It pays to get it set up once to make troubleshooting 100x easier. put a xdebug_break() in the fruitcake middleware and see if it actually gets executed.

@laracoft as recently pointed out to me by @sinnbeck

php artisan optimize:clear

calls the following:

        $this->call('view:clear');
        $this->call('cache:clear');
        $this->call('route:clear');
        $this->call('config:clear');
        $this->call('clear-compiled');

so you can just call

php artisan event:clear
php artisan optimize:clear

instead.

thanks @automica :)

Actually, now that I'm testing on local, when loading my home page, among multiple request that are made I get origins in the first request "http://www.localhost" included:

Access-Control-Allow-Origin: http://www.localhost

But for fonts which are included in my blade template, I don't get headers included. In fact, these are paths to direct eot or woff files. They seem to not go through the middleware at all!

@font-face {
                font-family: some font;
                src: url('{{ asset('path to font.eot') }}');
                src: url('{{ asset('path to font.woff') }}') format("woff");
                font-weight: normal;
                font-style: normal;
            }

So, do the assets go through a laravel request life cycle here? I'm confused!

For assets use .htaccess in public

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"