Angular2 Headers

Question

When I call server without headers its working and server returns json:

this.http.get(url)

but when I add header:

var headers = new Headers({'x-id': '1'});
this.http.get(url, {'headers': headers})

browser returns error:

XMLHttpRequest cannot load http://domain/api/v1/. 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:3000' is therefore not allowed access.

I also tried add Origin header - browser error: Refused to set unsafe header "Origin"

And Access-Control-Allow-Origin header - no effect

---

On server (Laravel) I created middleware Cors.php:

<?php

namespace App\Http\Middleware;

use Closure;

class Cors {
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:3000')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'x-id');
    }
}

---

Im new to angular2 and CORS requests, dont know what to do.

• Angular: 2.0.0-beta.0
• Laravel: 5.0
• Browser: Google Chrome

Answer 1

A preflighted request with CORS means that an OPTIONS HTTP request is executed before the actual one. You switch from a simple request to the one since you add a custom header in the case of a GET method. This link could help you to understand what happens: http://restlet.com/blog/2015/12/15/understanding-and-using-cors/.

FYI the Origin header is automatically added by the browser when executing a cross domain request.

I think your problem is within the Access-Control-Allow-Origin header. You must set the host that makes the call and not the address of the server. You should have this instead (if your Angular2 application is running on localhost:8080):

return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers', 'x-id');

Hope it helps you, Thierry