Laravel API is not allowing access by my front-end with React and Redux

Question

My API is built with Laravel version 5.6 and my front-end uses React with Redux. I'm facing the CORs problem when attempting to connect to the API.

Failed to load http://127.0.0.1:8000/api/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried applying the solutions I found around. I have my Cors middleware class:

public function handle($request, Closure $next)
{
    return $next($request)
        ->header("Access-Control-Allow-Origin", "http://localhost:3000") // Already tried with *
        ->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
        ->header("Access-Control-Allow-Headers", "Content-Type, Authorization");
}

And the Kernel.php:

protected $middlewareGroups = [
    ...,
    'api' => [
        ...
        'cors'
    ],
];

protected $routeMiddleware = [
    ...
    'cors' => \App\Http\Middleware\Cors::class
];

The routes:

Route::post("/login", "Api\UserController@login");
Route::post("/register", "Api\UserController@register");

Route::prefix("users")->group(function () {
    Route::middleware("auth:api")->group(function () {
        Route::get("me", "Api\UserController@details");
    });
});

And the action:

export function login(data) {
  return dispatch => {
    return dispatch({
      [RSAA]: {
        endpoint: "http://127.0.0.1:8000/api/login",
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
        types: [LOGIN, LOGIN_SUCCESS, LOGIN_FAILURE]
      }
    })
  }
}

In the headers of the request, I can see the CORs methods that were sent. So what's missing?

see if this issue helps: https://stackoverflow.com/questions/33076705/laravel-5-1-api-enable-cors — Leonardo Lobato, Dec 27 '18 at 13:31

score 2 · Answer 1 · answered Aug 14 '18 at 13:02

2

Please put below lines on top of your routes file that is api.php. It will solve the CORS issue.

use Illuminate\Http\Request;

header('Access-Control-Allow-Origin: *');
//Access-Control-Allow-Origin: *
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

answered Aug 14 '18 at 13:02

Umang Patel

133
3

Yes, in here it worked. Now, the front-end is sending two requests to the same API when clicking the button. Do you know why? – Aug 14 '18 at 13:53

score 0 · Answer 2 · answered Aug 14 '18 at 12:21

0

use this package https://github.com/barryvdh/laravel-cors it's solve your cors problem

answered Aug 14 '18 at 12:21

Usman Jdn

807
8
21

Yes, I am aware of it. But is it possible to fix the problem without it? – Aug 14 '18 at 12:21
1

yes try this I always use an easy method. Just add below lines to \public\index.php file. You don't have to use a middleware I think. `header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');` – Usman Jdn Aug 14 '18 at 12:25
Actually, how when clicking the login button once, two requests are being sent. One returning 200 and the other 401. – Aug 14 '18 at 12:34
Removing the code you suggested makes it send just once, but still fails because of CORs. – Aug 14 '18 at 12:35
no it's not a perfect solution... see this https://stackoverflow.com/a/43881141/8830631 – Usman Jdn Aug 14 '18 at 12:53
I thought that because I erased "OPTIONS" it was still showing the error, but it didn't solve either. – Aug 14 '18 at 12:58

CodeZombie · Answer 3 · 2018-08-14T12:50:00.700

0

I had the same issue after deploying my react app with agnostic setup on server.Configuring the laravel with the package laravel-cors didn't help me.I configured the .htaccess of my server as follows:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

edited Aug 14 '18 at 12:50

answered Aug 14 '18 at 12:26

CodeZombie

2,027
3
16
30

Yes, but it didn't solve either. I guess `laravel-cors` is the only way... shitty CORs. Why come up with this? – Aug 14 '18 at 12:51
Did you add the above code in your domain root `.htaccess` file. – CodeZombie Aug 14 '18 at 12:53

Laravel API is not allowing access by my front-end with React and Redux

3 Answers3