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.

Answer 2

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.