Laravel Angular CORS issue in Authentication

Question

I am following this tutorial to set up authentication with tokens using Laravel and Angular.

https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps

This works fine but when I host Laravel (as backend) separately, and Angular frontend on another domain, I get the foolowing error in console :-

XMLHttpRequest cannot load http://jotdot.mysite.com/api/authenticate.
Response to preflight request doesn't pass access control check: The 
'Access-Control-Allow-Origin' header contains multiple values '*, *', but 
only one is allowed. Origin 'http://jotdotfrontend.mysite.com' is 
therefore not allowed access.

I've placed a CORS middleware in Laravel and it works fine for simple routes.

class Cors
{
/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{
    return $next($request)->header('Access-Control-Allow-Origin', '*')-  >header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}

}

How do I add CORS middleware to this :-

Route::group(['prefix' => 'api', 'middleware' => 'cors'], function()
{
    Route::resource('authenticate', 'AuthenticateController', ['only' =>    ['index']]);
    Route::post('authenticate', 'AuthenticateController@authenticate');
});

Adding it next to ['prefix' => 'api'] did not solve the problem.

Thanks

Can you update the routes example to show how you added the middleware to the route group definition? — Jeff Lambert
– Jeff Lambert, Commented Nov 4, 2015 at 13:22
@watcher - I updated it, there was another way I did it, but it still didn't work — Stacy J
– Stacy J, Commented Nov 4, 2015 at 13:50

Jeff Lambert · Accepted Answer · 2015-11-04 15:08:57Z

1

I think your issue is that your middleware is most likely acting like an 'after' middleware, and as such isn't modifying the request before it's returned to the client. Instead it is modifying the request after it is sent, which doesn't do you any good.

Try modifying your handle function like this:

public function handle($request, Closure $next)
{
    $request->header('Access-Control-Allow-Origin', '*');
    $request->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    $request->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

    return $next($request);
}

edited Nov 4, 2015 at 15:08

answered Nov 4, 2015 at 14:36

Jeff Lambert

24.7k4 gold badges72 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stacy J Over a year ago

getting an error - Call to a member function header() on string. checking for it

Stacy J Over a year ago

yes this resolved the header issue, but still console giving the error - "Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response."

Jeff Lambert Over a year ago

At least that's a different error, so, progress! See the update. I added the Access-Control-Allow-Headers header, but you may not need to include all of the ones I did (or you may need to include more than I did). According to here, you only need to include that header on the preflight (OPTIONS) request

Stacy J Over a year ago

I added "$request->header('Access-Control-Allow-Credentials', true);" but still same error.

Jeff Lambert Over a year ago

@StacyJ that's because that's not what the current error is complaining about. Add the Access-Control-Allow-Headers header

|

Community · Accepted Answer · 2017-05-23 12:24:14Z

0

Well, there are 2 methods to solve this issue so far. I have explained the solution in my answer for another question on this site.

Please check the following answer:

Angular CORS Issue for Laravel Backend

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 4, 2017 at 14:15

Codemole

3,2095 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Laravel Angular CORS issue in Authentication

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related