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

Question

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)

• I've been trying to enable cors in Laravel side with Cors middleware
• The API calls are working using chrome web security off. The first answer here solves the problem, But I really want to stop using the CMD and unsecured chrome version everytime im testing my app.
• Using chrome extension POSTMAN API calls to my API are working.

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

Answer 1

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.