angular 5 fetch data from Api- No 'Access-Control-Allow-Origin' header

Question

I want to fetch data from a API. To fetch the data u need to pass the following conditions: U need to use a token. This token is only valid for a specific public IP. u need to use the bearer authentication scheme to fetch the data. Now i want to try this out. And started my application locally with the following code: `

 public static USERTOKEN: string = '***';

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': ' Bearer ' + AppComponent.USERTOKEN
      })
    };
    this.http.get('https://developer.clashofclans.com/clans/%2388GL8202', httpOptions).subscribe(data => {
      console.log(data);
    });
  }
}
`

Of course i added the httpClientModule as a import in my module class. But i get the following error: Failed to load resource: the server responded with a status of 403 (Forbidden) localhost/:1 Failed to load https://developer.clashofclans.com/clans/%2388GL8202: 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:4200' is therefore not allowed access. The response had HTTP status code 403.

What am I doing wrong? Is the bearer auhtorization wrong?

score 1 · Accepted Answer · edited May 28 '18 at 09:31

I'm a little late on that but the Solution was: start the Angular application with a proxy-config.json with the target url of the api:

  "/v1": {
    "target": "https://api.clashofclans.com",
    "secure": true,
    "changeOrigin": true
  }

then on the package.json add the proxy parameters for the "start" script:

"scripts": {
  "ng": "ng",
  "start": "ng serve --proxy-config proxy.conf.json",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}

score 0 · Answer 2 · answered Feb 09 '18 at 17:58

The mistake you are doing is 1. you are trying to call the public API from your local environment. Its evident from this error message.

'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

This is NOT possible to programatically access in your scenario from localhost due to CROS permission issues.

Move your test code to a public domain and then whitelist that domain in your backend.

score -1 · Answer 3 · answered Feb 09 '18 at 17:48

-1

Does not seem to be a front-end issue, however, a NO Access-Control-Allow-Origin error could have different reasons. I think you should manage it in your back-end code or your web server configurations. For example in apache, if you have a .htaccess file you can manage your permissions right there. Also make sure that your back-end does not need to additional headers in order to recognize its clients.

answered Feb 09 '18 at 17:48

pouyada

341
3
15

i really dont have any backend and this app isnt located in any apache server. i just tried to start this project locally and i registered my token on their API website - with my public IP. Does this Webservice call work if i only start this application locally? My knowledge is very poor on servers, middleware, backend etc. – MarcoLe Feb 09 '18 at 18:01

angular 5 fetch data from Api- No 'Access-Control-Allow-Origin' header

3 Answers3