Angular 2 HTTP POST does an OPTIONS call

Question

I'm encountering a really strange problem with my Angular 2 application. I actually want to make a POST call containing a JSON to my Play Scala API, but it keeps want to try to make an OPTIONS call.

Here is my code :

LoginService

constructor (private _apiEndpoint: ApiEndpoint) {}

postLogin(login: string, credential: string): Observable<AuthToken> {
    let headers = new Headers({ "Content-Type": "application/json" })
    let jsonLogin = {"login": login, "password": credential}

    return this._apiEndpoint.postLogin(JSON.stringify(jsonLogin), headers)
                    .map(this._apiEndpoint.extractData)
}

ApiEndpoint

constructor (private _http: Http) {}

postLogin(body: string, options: any) {
    return this._http.post("http://localhost:9000/login", body, {
        headers: options
    })
}

And then when I try to make the call (I've tried to console.log to check the JSON and it's correct), and the call tries to make an OPTIONS call for whatever reason :

Has anyone an idea ? Thanks !

Answer 1

You are making a cross domain request.

The request is to localhost:9000 and is made from localhost:9002.

The browser creates a pre-flight request with the OPTIONS verb in order to know if he can continue and make the "real" request.

Read more about CORS here.