cors - Angular2 OPTIONS method sent when asking for http.GET

I'm trying to add basic authentification to my angular2 app.

public login() {
    // Set basic auth headers
    this.defaultHeaders.set('Authorization', 'Basic ' + btoa(this.username + ':' + this.password));


    console.log('username', this.username)
    console.log('password', this.password)
    console.log(this.defaultHeaders)

    // rest is copy paste from monbanquetapiservice
    const path = this.basePath + '/api/v1/development/order';        

    let req = this.http.get(path, { headers: this.defaultHeaders });
    req.subscribe(
        _ => { },

        err => this.onError(err)
    );
}

What I expect to see is a GET request with the Authorizationheader I put.

But what I see is first a OPTIONS with this headers:

OPTIONS /api/v1/development/order HTTP/1.1

Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
Access-Control-Request-Headers: authorization, content-type
Accept: */*
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,fr;q=0.4

Since my server doesn't allow OPTIONS on this url, I get an error.

I know that some methods like PUT or POST send first an OPTIONS method to preflight the request, but GET doesn't.

Why does angular2's http send a OPTIONS first?

Thanks.

Answer

This is the way CORS works (when using cross domain requests). With CORS, the remote Web application (here the one with domain mydomain.org) chooses if the request can be served thanks to a set of specific headers.

The CORS specification distinguishes two distinct use cases:

• Simple requests. This use case applies if we use HTTP GET, HEAD and POST methods. In the case of POST methods, only content types with the following values are supported: text/plain, application/x-www-form-urlencoded and multipart/form-data.


• Preflighted requests. When the ‘simple requests’ use case doesn’t apply, a first request (with the HTTP OPTIONS method) is made to check what can be done in the context of cross-domain requests.

It's not Angular2 that sends the OPTIONS request but the browser itself. It's not something related to Angular.

For more details, you could have a look at this article: