Laravel 6 CORS Middleware Tutorial

By Hardik Savani November 5, 2023 Category : Laravel

Do you have issue like laravel 6 cors header ‘access-control-allow-origin’ missing or how to use cors middleware in laravel 6 than i will show you how to work with cors(Cross-Origin Resource Sharing) in laravel 6 application.

One my viewer sent me a message with screen shot "Access to XMLHttpRequest at 'http://localhost:8000/api/users' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." and he was told me when i was access my api from other project then it is show me error like this way.

However, i know the solution of he sent me message because i fetch many time this error and solved it using barryvdh/laravel-cors composer package with laravel 6. i sent him github like with barryvdh/laravel-cors package.

Than i thought i should share one tutorial with how to use cors middleware in laravel 6. so you can follow bellow tutorial and solved your error:

Create API Route

In this is step we need to create routes for testing. so open your "routes/api.php" file and add following route.

routes/api.php

Route::get('/test', function (Request $request) {

return response()->json(['Laravel 6 CORS Example from ItSolutionStuff.com']);

});

User API to Another Project File

Now i am going to create new html file and try to access my api using jquery ajax. so you can see bellow file code that i written.

index.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 6 CORS Middleware Tutorial - ItSolutionStuff.com</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"></script>

</head>

<body>

<script type="text/javascript">

$.ajax({

type: "GET",

dataType: "json",

url: 'http://localhost:8000/api/test',

success: function(data){

console.log(data);

}

});

</script>

</body>

</html>

Ok, now if i run this file, it's give this error:

"Access to XMLHttpRequest at 'http://localhost:8000/api/test' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

You can also see bellow screen shot.

Now we will resolve how to solve this error using barryvdh/laravel-cors composer package.

Install barryvdh/laravel-cors

first of all we will install barryvdh/laravel-cors composer package by following composer command in your laravel 6 application.

composer require barryvdh/laravel-cors

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php

'providers' => [

....

Barryvdh\Cors\ServiceProvider::class,

],

Now we need to use in middleware kernel file.

So let's change it:

app/Http/Kernel.php

.....

protected $middleware = [

...

\Barryvdh\Cors\HandleCors::class,

];

.....

After that you can run your another project html file and check it.

It will works :)

I hope it can help you...

Shares