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

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.

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 checkhere.

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.

‘*’ 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.

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.

Please follow and like us:

Summary

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?