Allow CORS With Laravel and Angular2

Question

I'm creating a Laravel web app that will act as an API for an Angular2 app, for now i'm hosting the Laravel app on WAMP server on windows laravel is on localhost:8000 and Angular is on localhost:4200 I've created the middleware for CORS like that:

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

When calling my api url I get this:

XMLHttpRequest cannot load http://localhost:8000/api/myapi. 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:4200' is therefore not allowed access

I'm pretty sure it's not something with the middleware because the api works when I ng build the angular app, it just doesn't work with ng serve when serving on localhost:4200

any ideas? Thank you

Oluwafemi Sule · Accepted Answer · 2017-05-20 21:49:24Z

2

The preflight request is a HEAD request. You should list it in Access-Control-Allow-Methods.

Your handle will be like so:

public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
    $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
    $response->header('Access-Control-Allow-Origin', '*');
    return $response;
}

edited May 20, 2017 at 21:49

answered May 20, 2017 at 21:44

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

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

1 Comment

Joseph Khella Over a year ago

thx for your reply,,, I don't really get it, shall I make it like GET, POST, PUT, DELETE, OPTIONS, HEAD ? i tried this and still not working

Joseph Khella · Accepted Answer · 2017-05-20 22:00:52Z

0

SOLVED

It turned out to be something with chrome itself, the app works just fine on edge or any browser,, in order to make it work on chrome,, install this plugin. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en

answered May 20, 2017 at 22:00

Joseph Khella

7152 gold badges9 silver badges26 bronze badges

Comments

Nikhil Radadiya · Accepted Answer · 2017-05-21 13:13:53Z

0

You can also consider using this package.

answered May 21, 2017 at 13:13

Nikhil Radadiya

2,0653 gold badges25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Allow CORS With Laravel and Angular2

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related