'Laravel Angular CORS issue

I've searched high and low and tried several solutions but I have not been able to figure this out. I'm working locally (MAMP).

I have two local servers, an Angular front-end server and a Laravel server to process requests and CRUD the data back to Angular.

Fetching the data from the Laravel server is no problem, when I try Create, Update, or Delete operations to update the server I keep getting a CORS error (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). I have the following directives set in my .htaccess file:

Header add Access-Control-Allow-Origin: *

Header add Access-Control-Allow-Methods: GET,POST,OPTIONS,DELETE,PUT

Header add Access-Control-Allow-Headers: Content-Type

I've tried to implement these solutions to add CORS header response to Laravel to my project but I still have not had any success:

https://github.com/barryvdh/laravel-cors

https://github.com/spatie/laravel-cors

I'm hoping that someone has encountered a similar issue and can help.

angularlaravelcors


Solution 1:[1]

This barryvdh cors config that should allow you to allow everything 

'supportsCredentials' => true,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
'exposedHeaders' => ['*'],
'maxAge' => 0,

Also check your server response in chrome dev tools network section. Make sure that headers are set up.

Solution 2:[2]

This is an error that occurs on the client side because the server did not respond with the correct CORS value. The .htaccess file looks okay, but try in your Laravel back-end to add the header with PHP. See more here.

return response(...)
  ->header('Access-Control-Allow-Origin', '*')
  ->header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');

If you need this for all endpoints consider using a middleware.

Edit: I think the problem might also be in your Allow-Headers. Try to add origin to your allowed headers

->header('Access-Control-Allow-Headers', 'origin, x-requested-with')

Solution 3:[3]

1st add Access-Control-Allow-Origin: in api.php

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method,

Authorization"); header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE, PATCH");

add this code in laravel server api.php file.

or turn Off your Toggle in Access-Control-Allow-Origin.

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Solution 4:[4]

Since Laravel 9.2, this Middleware is included in laravel/framework itself, so it's unnecessary.

At first you may need to install this cors package. https://github.com/fruitcake/laravel-cors [other options are also available].

Case: 1: To allow CORS for all your routes, add the HandleCors middleware at the top of the $middleware property of app/Http/Kernel.php class:

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

Case 2: define and use individually or group of routes

protected $routeMiddleware = [
    .....
    'cors' => \Fruitcake\Cors\HandleCors::class,
];

and then add cors middleware to your API route. For example:

'api' => [
    'cors', // or can use \Fruitcake\Cors\HandleCors::class as well
    'throttle:60,1',
    'bindings',
],

Or,

Route::group(['middleware'=> ['cors']], function(){
   // Your API end points goes here.
});

Solution 5:[5]

I must have messed up the implementation of the BarryVDH CORS package because after fiddling with it it di resolve the situation.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shimazakhi
Solution 2
Solution 3
Solution 4 Bedram Tamang
Solution 5 angler

Related Questions