No 'Access-Control-Allow-Origin' header on Angular 2 but cURL works fine

Question

I am developing an application using Angular 2 and I find the following error when I try to make an API call:

XMLHttpRequest cannot load http://localhost:9090/conf. 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:5555' is therefore not allowed access.

Here, there are two examples of my calls:

import { Http, Response } from '@angular/http';

// ...

@Injectable()
export class ConfService {

  // ...

  getConf(): Observable<string[]> {
    return this.http.get(
                      'http:localhost:9090/conf?id=1',
                      {
                        headers: {
                          'Accept': 'application/json;charset=UTF-8'
                        }
                      }
                    )
                    .map((res: Response) => res.json())
                    .catch(this.handleError);
  }

  setConf(conf: any[]): Observable<string[]> {
    return this.http.get(
                      'http:localhost:9090/conf?id=1',
                      conf,
                      {
                        headers: {
                          'Content-Type': 'application/json;charset=UTF-8'
                        }
                      }
                    )
                    .map((res: Response) => res.json())
                    .catch(this.handleError);
  }

}

However, when I use cURL it works!

$ curl -XPUT 'localhost:9090/configuration?id=1' \
> -H 'Content-Type: application/json'
> -d '{"conf":1234}'
Success!
$ curl -XGET 'localhost:9090/conf?id=1'
{"conf":1234}

What is happening here?

Thanks

chrome.google.com/webstore/detail/cors-toggle/…

user3025289
– user3025289

2016-11-04 13:37:23 +00:00
Commented Nov 4, 2016 at 13:37 — user3025289
– user3025289, Commented Nov 4, 2016 at 13:37

Tushar · Accepted Answer · 2016-11-04 13:35:49Z

3

It's because of browser security, a general CORS issue in browser. Your web app is running at localhost:5050 and server at localhost:9090. Browser won't allow to access another host with different port number. The solution is handle the CORS in your server (i.e in your app running at localhost:9090)

answered Nov 4, 2016 at 13:35

Tushar

3,0822 gold badges28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marc_aragones Over a year ago

My Spring app uses Tomcat and I cannot boot it if there is another app (my Angular client) using the same port.

Tushar Over a year ago

Of course, they have to run in different port. Configure your spring app to have CORS headers.

Collectives™ on Stack Overflow

No 'Access-Control-Allow-Origin' header on Angular 2 but cURL works fine

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related