how to solve “no access control allow origin header is present on the requested resource” error in Laravel 5.5

how to solve “no access control allow origin header is present on the requested resource” error in Laravel 5.5

laravel tutorials

laravel tutorials

In this tutorial I’m going to show you how to solve “no access control allow origin header is present on the requested resource” error in Laravel server side.

access control arrow origin a+l

When you try to send HttpRequest to a different domain than your page is on, sometimes browser is blocking that request, because some security reasons.

If two pages are in same origin (domain), bellow three factors are affected on those pages.

    1.Same protocol.

    2.Same Port (if one is specified).

    3.Same host.

If two pages are in different origins (domains), we have to do something to avoid no ‘access control allow origin’ error.

So, To avoid ‘no access control allow origin’ error we have to allow the browser to cross-domain communication using additional headers.  Let’s start.

This is the video tutorial.

If you want to know how to create a fresh Laravel application, click here.

If you want to know how to solve no access control allow origin header is present on the requested resource, error when your are in development check here.

Laravel provides amazing features for creating wonderful web applications. Here, I’m going to use one of that amazing feature call, ‘middleware ‘ to solve the error. In short, a middleware is a filter for each request. It also acts in the middle between request and response.

Creating the Cors middleware

First of all, we have to create a middleware call, Cors. To do that,open the command window and execute following command.

Notice: Use the command window as much as possible to create controllers, middlewares etc. It reduces workload.

‘Php artisan make:middleware cors’

We can find our new cors middleware in the app\Http\Middleware directory. Then, we have to add functionalities to that Cors middleware. After doing that the Cors.php file is as follows.

<?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', 'GET, POST, PUT, DELETE, OPTIONS')
          ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
          ->header('Access-Control-Allow-Credentials',' true');
    }
}

‘*’ is a wildcard and it is means that allowing any origin to access the resource.

$next is a callback function that allows the Cors middleware to pass the request with the header properties. If you want to customize parameters in header methods, you can do it here. For an example, to send a request with allowing only POST method you can define parameter as follows.

header(‘Access-Controll-Allow-Methods’, ‘POST’)

Add the middleware into Kernel.php file

Then, open the Kenel.php file and find the application’s global HTTP middleware stack. Add Cors middleware at end of this array.  After doing that the application’s global HTTP middleware stack is as follows.

 /**
 * The application's global HTTP middleware stack.
 *
 * These middleware are run during every request to your application.
 *
 * @var array
 */
protected $middleware = [
    \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\TrustProxies::class,
    \App\Http\Middleware\Cors::class,//cors added here 
];

Each middlewares in the application’s global middleware stack will runs during every request to our application.

Finally, send a request again. As you can see the ‘no access control allow origin’ error has gone.

Troubleshooting:

  • If you got the same error again, try after cleaning cache.
  • Make sure that you added path of the Cors middleware into the application’s global middleware stack.

If you have any question, suggestion or even idea, please comment in the comment section. Those are very important to me to improve quality of my articles. If this tutorial solved your problem, don’t forget to share. Thank you for reading.

Summary
how to solve “no access control allow origin header is present on the requested resource” error in Laravel
Article Name
how to solve “no access control allow origin header is present on the requested resource” error in Laravel
Description
In this tutorial i'm going to show you how to solve “no access control allow origin header is present on the requested resource” error in Laravel. When you try to send HttpRequest to a different domain than your page is on, sometimes the browser is blocking that request. Why is browser blocking that request?
Author
Publisher Name
Angular + Laravel
Publisher Logo
Please follow and like us:

2 Responses

  1. abaehr says:

    Hi, I was getting that error, now i am getting “Uncaught (in promise) Error: Request failed with status code 419”

    In the response is
    “file”: “C:\\wamp64\\www\\laravelvuejstutorial\\app\\Http\\Middleware\\cors.php”,
    “line”: 14,
    “function”: “Illuminate\\Routing\\{closure}”,
    “class”: “Illuminate\\Routing\\Pipeline”,
    “type”: “->”

    which is referring to the line “return $next($request)”

    I added the class to the middleware section in kernal.php

    any idea?

    thanks!

Comments are closed.