-1

I am trying to connect to an Api (who is not mine), but i get CORS error (screen 1).

Then i tried to add 'Access-Control-Allow-Origin': '*' in my header but i get the same result (screen2).

Here is my code :

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => console.log(res));
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    return this.http.get('https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

I don't know what to do anymore..

Thanks

enter image description here enter image description here

Leasye
  • 261
  • 1
  • 8
  • 19
  • I've had the same problem before.(if you want to have a look: https://stackoverflow.com/questions/54168106/angular-json-put-and-delete-returns-403-but-postman-app-works-well) I learnt cors is not a problem for postman. maybe you could use chrome extension for bypass cors for test but not a solition i guess. – Cem Kocagöz Feb 24 '19 at 01:25
  • Thanks for the reply. I put postman just to show the get works. You right postman doesn't care about SOP – Leasye Feb 24 '19 at 01:32
  • 1
    I found a solution, see my answer bellow. Hope this will help you :) – Leasye Feb 24 '19 at 01:54
  • I fixed my problem with server headers (actually asked my manager to fix it).But I will save that answer for my future projects.Thank you. – Cem Kocagöz Feb 24 '19 at 02:00
  • You welcome. I'm glad you found your answer too :) – Leasye Feb 24 '19 at 02:03
  • Any explains for the -1 ? – Leasye Feb 24 '19 at 09:36

3 Answers3

4

Finally found an excellent article about my prob. It mentions i had 3 solutions :

  1. CORS header (requires server changes) ==> Then NO

  2. JSONP ==> heeem ... NO

  3. Proxy Server ==> Well .. ok

I try the third solution. But to be honest i was quite discouraged, so first i try it with a nice solution : i borrow a cors proxy (this one is quite good)

Then i do the folowing : 

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  res;

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => {console.log(res); this.res = res; });
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'X-Requested-With': 'XMLHttpRequest'
    });
    return this.http.get('https://cors-anywhere.herokuapp.com/https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

And finaly it works.

enter image description here

Leasye
  • 261
  • 1
  • 8
  • 19
1

The 'Access-Control-Allow-Origin': '*' should be not be set in your request, but in the server's response instead. Hopefully you have access to this server.

Also consider not using the wildcard but only allowing http://localhost:4200. No need to open to everybody.

Chris
  • 1,154
  • 10
  • 15
0

Postman requests go through because it doesn't care about CORS. Like Chris stated, CORS should be setup in the server (keyforge).

I looked at the site and looks like they don't have any api documentation yet, so you're best bet would be to contact their developer team and ask if they can register localhost:4000 in their whitelist.

dardardardar
  • 314
  • 1
  • 12
  • 1
    Thanks for reply. Contact them is currently not possible. About postman, i alreay said that i know it doesn't care about SOP (see my comment above), i post it just to show the request works. Though it help but i think i will remove it.. – Leasye Feb 24 '19 at 02:02