Laravel 7 cors problem with nuxt ssr

[wolfiton]

New to nuxt and laravel 7 Route::group

My laravel and cors package versions:

• "fruitcake/laravel-cors": "^2.0",
• "laravel/framework": "^7.24",

My Api Routes

Route::group(['prefix' => 'auth', 'namespace' => 'Auth'], function () {
    Route::post('signin', 'SignInController');
    Route::get('me', 'MeController');
    Route::post('signout', 'SignOutController');
});

Route::group(['prefix' => 'snippets', 'namespace' => 'Snippets'], function () {
    Route::post('', 'SnippetController@store');
    Route::get('{snippet:uuid}', 'SnippetController@show');
});

The auth route works but the snippet one doesn't work.

My cors is like this:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'api/snippets', '*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:3000'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

I also tried this

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

I followed all the previous recommendations on the page.

Cors error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/snippets. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Also, the network response is a 204 No Content

This request http://localhost:8000/api/snippets/ works fine in postman but not in nuxt, I get the cors error.

Can also supply a git repo for reproduction of the problem.

Api repo: https://github.com/wolfiton/api

Client repo: https://github.com/wolfiton/client

Can someone tell me what is happening here?

Thanks

[wolfiton]

Using dd or any log function in laravel will affect the cors.

Here is a quote from the official site https://github.com/fruitcake/laravel-cors#echodie

Echo/die If you echo(), dd(), die(), exit(), dump() etc in your code, you will break the Middleware flow. When an output is sent before headers, CORS cannot be added. When the scripts exits before the CORS middleware finished, CORS headers will not be added. Always return a proper response or throw an Exception.

This code will make it work:

public function store(Request $request)
    {
        $snippet = $request->user()->snippets()->create();

        return fractal()
            ->item($snippet)
            ->transformWith(new SnippetTransformer)
            ->toArray();
    }