CORS Preflight error with Apache, Laravel and AngularJS

Question

I have implemented a backend with an Apache server with AMI from AWS and Laravel. For authentication I use the JWT Auth plugin.

My frontend is build with AngularJS. Before using the authentication everything worked fine. When I try to authenticate the user with an authorization header I get a CORS Preflight error. I use the following call from my AngularJS application:

delete $http.defaults.headers.common['X-Requested-With'];
$http.defaults.headers.common.Accept = "text/plain";
$http({
    url: 'http://MYURL',
    method: "GET",
    headers: {
        'Access-Control-Allow-Headers': 'Authorization, Content-Type, Accept',
        'Content-Type' : 'text/plain',
        'Authorization': 'Bearer '+token,
    }
 })

In my Laravel backend I used the following configuration:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Authorization, Content-Type");

This is the response from the OPTIONS call:

This is the error I get in Google Chrome: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Any ideas on this issue? Do I have to configure this within Angular, Laravel or my httpd.conf?

EDIT:

I added it as a global Middleware and in the app.php as service provider. The configuration looks like this:

return [
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Authorization, Content-Type'],
    'allowedMethods' => ['*'],
    'exposedHeaders' => [],
    'maxAge' => 0,
    'hosts' => [],
];

But I have no idea if it works correctly.

morphatic · Accepted Answer · 2016-05-10 21:44:18Z

1

Have you considered using a plugin for managing CORS setup like this one?

It appears that the list of headers you allow on the server side (Authorization, Content-Type) is not the same as the list of headers being sent by the request (Authorization, Content-Type, Accept). It could be that the front end is asking for permissions that you aren't allowing on the back end.

answered May 10, 2016 at 21:44

morphatic

7,9854 gold badges52 silver badges65 bronze badges

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

1 Comment

Gingerbread123321 Over a year ago

I added it as a global Middleware and in the app.php as service provider. See the edit in my question.

Collectives™ on Stack Overflow

CORS Preflight error with Apache, Laravel and AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related