How to make CORS-enabled HTTP requests in Angular 2?

Question

The error is the following:

XMLHttpRequest cannot load http://some_url.herokuapp.com/api/some_api/. 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 503.

when calling

return this._http.post(requestUrl, JSON.stringify(requestBody), requestOptions)

I had troubles with CORS (when working with Angular 1) in the past and I remember that once CORS were activated server-side,I had to transform the http request to parse certain HTTP headers.

I am quite confused about how it should work, so any explanation is very welcome.

This might be a server-side problem. API is responding with 503, so maybe it's some kind of error handler (e.g. in proxy service) that doesn't provide "Access-Control-Allow-Origin" headers like the rest of your backend? — jkondratowicz, Apr 21 '16 at 11:42

score 19 · Accepted Answer · edited Jul 15 '17 at 15:49

In fact, it's not an Angular2 issue but a problem at the server side. The preflighted OPTIONS request needs to return an Access-Control-Allow-Origin header in its response.

Sending the Origin header in the original request will enable the CORS support on the server side. This header is automatically added by the browser when it detects that the domain of the request isn't the same as the caller's.

Be careful when implementing the preflight OPTIONS request on the server side since credentials aren't sent at this level. They are only sent within the target request. It seems to be the problem since you have 503 error. You're trying to check if the OPTIONS request is authenticated but it's not actually the case...

See this article for more details:

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Please note that URL link is no longer valid. – Jun 03 '21 at 18:35 — , Jun 03 '21 at 18:35

score 0 · Answer 2 · edited Feb 26 '20 at 11:14

login(loginDetails:LoginDetails){

    const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(loginDetails.getUserName + ':' + loginDetails.getPassword) });

    this.http.post(this.url,loginDetails,{headers,responseType:'text' as 'json'}).subscribe(
        (result)=>{
            console.log(result)
            this.router.navigate(['/home']);
        },
        err=>{
            this.router.navigate(['/registration']);
        }
    )
}

How to make CORS-enabled HTTP requests in Angular 2?

2 Answers2

Linked

Related