I can't get the REST service response in Angular

Question

Inside our company's VPN I can call the web service (which is a REST service) fine, on FF and Chrome. I need to connect to it from Angular 2 though. Now, I tried to call the REST service(which is inside VPN) from Angular 2, in several ways, and I am always getting the message about CORS("No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401." in Chrome and "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://webwassvc-test.servizi.gr-u.it/essigEAIM/rest/monitoring/integrations/all?pag=1. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)." in Firefox). I tried setting the about:config:security.fileuri.strict_origin_policy to false, and it didn't help. The sysadmin on the REST server end told me he opened the server for CORS (cross domain) calls, so I think the problem is on my end, but I don't know what can it be. Any advice, please?

UPDATE: I can access the REST service and get the data from it, through PHP as middleware (localhost/angular2_site/file.php), but not from angular directly (localhost:4200).

Try to add Access-Control-Allow-Origin in the header of the request — Faly
You need to have a Content Security Policy meta tag on your http page, and you need to set an "Access-Control-Allow-Origin" header. Do you have both of these? — Aaron
In your REST api, response header should have Access-Control-Allow-Origin:localhost:4200 — Habeeb
It sounds like the sysadmin of the REST server is mistaken. If that server were actually opened for CORS calls it would be sending an Access-Control-Allow-Origin respond header. But it’s not sending that header. There is no way you can work around that on the client side from your JavaScript code. — sideshowbarker
@VladimirDespotovic It’s not normal but I guess it depends on exactly how the REST server is configured. It might have http://localhost safelisted in some way but not http://localhost:4200. Or it’s imaginable that it might be configured to not send the Access-Control-Allow-Origin response header to non-port-80 origins (dunno why anybody would ever configure something that way but who knows). — sideshowbarker

Victor Godoy Victor Godoy · Accepted Answer · 2017-02-09T13:52:36

Another option it's to manage it with a proxy or load balancer.

If you are developing with anuglar-cli you can use the Proxy To Backend support of the angular-cli. --proxy-config

from the angular-cli readme:

Say we have a api server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.

We create a file next to projects package.json called proxy.conf.json with the content
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}
You can read more about what options are available here webpack-dev-server proxy settings

and then we edit the package.json file's start script to be

"start": "ng serve --proxy-config proxy.conf.json", now run it with npm start

So at the end you can call your services as:

getUsers() : Observable<any>{
  return this.http.get('/api/users').map(res => res.json());
}

I can't get the REST service response in Angular

1 Answers