GET Axios request blocked by CORS (only failing for this specific request, others are working)

@bigweld86 can you please share your api.php file content? What's different between the routes?

Do you have your APP_URL=http://127.0.0.1:8000 within your .env file?

And can you post the cors middleware?

@nakov here's the api.php:

Route::group(['middleware' => ['guest:api', 'cors']], function () {

    Route::group(['prefix' => 'categories'], function() {


        Route::get('/list', 'Admin\CategoryController@index')->name('admin.categories.index');
        Route::post('/', 'Admin\CategoryController@store'); //->name('admin.categories.store');
        Route::get('/{id}', 'Admin\CategoryController@edit')->name('admin.categories.edit');
        Route::post('/{id}', 'Admin\CategoryController@update')->name('admin.categories.update');
        Route::delete('/{id}', 'Admin\CategoryController@destroy')->name('admin.categories.delete');
    });
});

The one I'm using with for my parameterized query is:

Route::get('/list', 'Admin\CategoryController@index')->name('admin.categories.index');

@sinnbeck here's my CORS middleware:

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', '*')
            ->header('Access-Control-Allow-Headers', '*');
    }
}

What is weird is that I copied/pasted the URL I'm using in my ListCategories component to get a list of items and still doesn't work. I mean, the same URL is working in one component but no in the other:

This is my method to retrieve the data in ListCategories:

getCategories() {
                return new Promise((resolve, reject) => {
                    const {sortBy, descending, page, rowsPerPage} = this.pagination;

                    axios.get(`http://127.0.0.1:8000/api/categories/list?page=${page}&items-per-page=${rowsPerPage}`)
                        .then(response => {
                            this.items = this.massageData(response.data.data.data);
                            this.options = response.data.data.pagination;
                            this.totalItems = response.data.data.options.totalItems;
                            this.loading = false
                            resolve()
                        })
                        .catch(errors => {
                            // eslint-disable-next-line no-console
                            console.log(errors)
                            reject()
                        })
                })
            },

the previous one works perfectly. This is the one in my Category component which is not working due to the Cors error:

getCategories() {
                const page = 1;
                // http://127.0.0.1:8000/api/categories/list?page=1&items-per-page=100&sort-by=asc&fields=id,name
                axios.get(`http://127.0.0.1:8000/api/categories/list?${page}=1`)
                    .then(response => {
                        // eslint-disable-next-line no-console
                        console.log(response);
                        //resolve()
                    })
                    .catch(errors => {
                        // eslint-disable-next-line no-console
                        console.log(errors)
                        //reject()
                    })
            }

@bigweld86 have you tried this package for handling CORS:

https://github.com/barryvdh/laravel-cors

Have you tried without the cors middleware if you still get the error?

Did you also check the network tab in Chrome to ensure that it actually calls the expected url when it works?

I saw the package before, but want to try to fix this issue first

@sinnbeck yeah, this is the output of the network tab:

Request URL: http://127.0.0.1:8000/api/categories/list?page=1
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: no-referrer-when-downgrade
Connection: close
Content-type: text/html; charset=UTF-8
Date: Sun, 17 Nov 2019 17:46:07 +0000
Host: 127.0.0.1:8000
X-Powered-By: PHP/7.2.8
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Host: 127.0.0.1:8000
Origin: http://localhost:8080
Pragma: no-cache
Referer: http://localhost:8080/categories/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
1: 1

And if you take the one that is exactly the same but does not work, is the output the same?

@sinnbeck @nakov I just restarted the server and everything is working. Don't exactly know what was happening. Thanks both anyway!

Ok that's weird. But great that it's working

@bigweld86 glad that it is working, but what kind of server are you using though? Just so we know if someone else is experiencing any problem like this :) as you might have similar pain later on if the server is not reflecting changes in some of the classes.