Xmlhttprequest (Ionic + Laravel) error

Question

Good morning! I am developing a hybrid application using Ionic, when I try to send a post to my server (Windows) error occurs below:

Xmlhttprequest cannot load http://localhost:8000/api/client/order. No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://localhost:8100' is therefore not allowed access.

Here is my service that contains the URL:

angular.module('starter.services')
.factory('Order', ['$resource', 'appConfig',function($resource, appConfig) {
    return $resource(appConfig.baseUrl + '/api/client/order/:id', {id: '@id'},{
        query: {
            isArray: false
        }
    });
}]);

Cors is enabled in the Laravel, follows my routes where it contains the URL:

Route::group(['middleware' => 'cors'], function(){
Route::post('oauth/access_token', function() {
    return Response::json(Authorizer::issueAccessToken());
});
Route::group(['prefix'=>'api', 'middleware'=>'oauth','as'=>'api.'], function(){
    Route::group(['prefix'=>'client','middleware'=>'oauth.checkrole:client','as'=>'client.'], function(){
        Route::resource('order',
            'Api\Client\ClientCheckoutController', [
                'except' => ['create', 'edit', 'destroy']
            ]);
        Route::get('products','Api\Client\ClientProductController@index');
    });

});

Follows Cors.php file:

    <?php
return [
    /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['GET', 'POST', 'PUT',  'DELETE'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

Personal thank you.

Answer 1

Speak Eduardo, all good?

The package Laravel Cors really has a bug! Calm down that it is not you that is getting crazy... We had this problem recently in an application, in angular coupling with Laravel 5.

After searching deeply we found this Issue: https://github.com/barryvdh/laravel-cors/issues/89

There’s even a comment from me over there: https://github.com/barryvdh/laravel-cors/issues/89#issuecomment-229107083

We are trying to investigate the fix to send a pull, but for now without success!

Basically the problem is in the registry of middleware in the kernel. To work, middleware needs to be registered in the global middleware, not the group middleware, weird, it’s not?

Thus the problem of CORS will be resolved.

Hugs!

Answer 2

I’m no expert on the subject, but...

The command is used for activation: php artisan make:middleware Cors Edit the file /app/Http/Middleware/Cors.php for:

namespace App\Http\Middleware;

use Closure;

class Cors {
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

Updates the file /app/Http/Kernel.php for:

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'cors' => \App\Http\Middleware\Cors::class, // <<< add this line
];

Example of use:

Route::get('breweries', ['middleware' => 'cors', function()
{
    return \Response::json(\App\Brewery::with('beers', 'geocode')->paginate(10), 200);
}]);

Taken from the site: http://en.vedovelli.com.br/2015/web-development/Laravel-5-1-enable-CORS/