CODEWITHSUNDEEP
laravelangularcors
TheUnreal
TheUnreal

Reputation: 24472

Angular 2 - No 'Access-Control-Allow-Origin' header is present on the requested resource

When trying to make API Calls from my Angular 2 App to my API, I get the following error:

XMLHttpRequest cannot load http://localhost/myAPI/public/api/v1/auth/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 422.

I've been checking every single question on the web and anything releated to CORS, nothing solved my problem!

My Laravel API running on port 80. (localhost)

My angular 2 app running on port 3000. (localhost:3000)

So.. What's wrong? Why my Angular 2 app cant get records from my API?

Upvotes: 8

Views: 29021

Answers (4)

ASHISH R
ASHISH R

Reputation: 4189

//Add this middleware in your express app
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('access-Control-Allow-Origin', '*');
next();
});

Upvotes: 1

Kevin
Kevin

Reputation: 2893

Open chrome inspect tool, switch to Network tab and inspect the request Angular2 sent.

In Headers->Response Headers, check whether there is Access-Control-Allow-Origin:* (I bet not)

If you are building an API, the easiest workaround is to add 

if (Request::is("api/*")) {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, If-Modified-Since, Cache-Control, Pragma");
}

in the beginning of routes.php, using a Middleware would be a better approach, but make sure it is working properly and adding the Access-Control-Allow-Origin to the response header.

Upvotes: 1

TheUnreal
TheUnreal

Reputation: 24472

Ok. seem like need to configure apache for it.

i'm using xampp webserver, and I had to edit my httpd.conf as explained here to solve this.

Added this line:

Header set Access-Control-Allow-Origin "http://localhost:3000"

solved my problem.

Restarting apache is neccessary.

Upvotes: 4

Nick
Nick

Reputation: 2214

I've been trying to enable cors in Laravel side with Cors middleware

Have you registered routes to handle OPTIONS requests?

If you simply add middleware to existing GET and POST routes, and the browser is making an OPTIONS request, the middleware is never reached.

Upvotes: 0

Related Questions