Enable Access-Control-Allow-Origin in angular 5 from Client side

Question

I am using httpClient angular package for get requests. I am using https://api.independentreserve.com/Public/GetValidPrimaryCurrencyCodes url for fetching data. It is giving CORS error in console.

I don't have access to server side code, but still I want to enalbe CORS in angular service. This is my service function

myfunction() {
  let head = new HttpHeaders();
  head.append('Access-Control-Allow-Headers', 'Content-Type');
  head.append('Access-Control-Allow-Methods', 'GET');
  head.append('Access-Control-Allow-Origin', '*');
  return this.http.get("https://api.independentreserve.com/Public/GetValidPrimaryCurrencyCodes", {headers: head}).toPromise();
}

I have tried it with chrome cors extension, and it works fine. But I want this to be enabled from angular code.

I have also tried working with proxies, following tutorial. BUt it is still not working. This is my object in proxy.conf.json file.

{
  "/api": {
    "target": "https://www.independentreserve.com/Public/GetValidPrimaryCurrencyCodes",
    "secure": false
  },
  "changeOrigin": true
}

and added "start": "ng serve --proxy-config proxy.conf.json" in package.json file. It is not working this way either.

Can any body give me some solution?

score 2 · Answer 1 · answered Mar 07 '18 at 17:46

2

You can't set response headers on client, only the server can do that. Ie. if you can't change the server side, your only option is adding a proxy server that you control in between.

answered Mar 07 '18 at 17:46

funkizer

4,626
1
18
20

I have tried it with proxy as mentioned. Is it correct way? – Umair Jameel Mar 07 '18 at 17:48
That's not a proxy server, you're just telling angular to swap the baseurl of all http requests it makes. – funkizer Mar 07 '18 at 17:49
Something like https://github.com/nodejitsu/node-http-proxy – funkizer Mar 07 '18 at 17:52

Enable Access-Control-Allow-Origin in angular 5 from Client side

1 Answers1