Enabling CORS for Laravel requested by Angular

Sun May 15 2022

Syful Islam Shakil


If you are new in Angular Laravel and don't know how to work these awesome framework together as frontend and backend. I assume you already know about basic angular crud functionality, just want to learn how you can use laravel as api. Then this tutorial is for you. 

First of All What is CORS? 

It means cross origin resource sharing. Our front end such as angular can not save data directly to database, so it needs an API which is laravel here. And this api is not in the same domain, as it does not work that way. It has to be in different domain. 

Now lets assume your Angular server is: localhost:4200 and laravel api server is: localhost:8000, now how you can pass data to cross origin domain and accept the data? I'm Here showing you dummy post request code how can send data from angular service to laravel api:

 


 

As you can see I have set the server link and sending the data to 'add_employee' url of laravel api. Now to accept the post data we have to set the routing: Routes/web.php


Route::post('/add_employee', 'EmployeesController@store');

Now first we have to disable the csrf token check for this request. So go to App/Http/Middleware/VerifyCsrfToken.php, and then put your 'add_employee' url to exception list:


protected $except = [
     '/add_employee'
];

Now we have to accept the header request. This can be done in couple of ways. I'm Showing two ways how you can do that.

 

METHOD 1:

 

Require the barryvdh/laravel-cors package in your composer.json and update your dependencies:


$ composer require barryvdh/laravel-cors

 

Add the Cors\ServiceProvider to your config/app.php providers array:


Barryvdh\Cors\ServiceProvider::class,

To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.phpclass:


protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

The defaults are set in config/cors.php. Copy this file to your own config directory to modify the values. You can publish the config using this command:


$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
return [
    'allowedOrigins' => ['http://localhost:4200'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With', 'Origin', 'Cache-Control', 'Pragma', 'Authorization', 'Accept', 'Accept-Encoding'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'Access-Control-Allow-Credentials' => true,
    'maxAge' => 0,
];

Now you are good to go!

 

METHOD 2:

It is a simple method. You can test it by this method. But it will breakdown your unit testing. So in your production app, it will be better to use package or creating a custom middleware for cors problem.

 

To accept data from angular, You can paste following code on top of index.php file of your laravel project folder.


header("Access-Control-Allow-Origin: *"); 
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");


2678 Views

Shakil's Blog ©2017-©2024 All Rights Reserved