I can't get the REST service response in Angular - rest

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).

Answer 1

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());
}