Impossible to perform HTTP request with cookie in Ionic

Question

I'm facing some problems to perform a HTTP get operation with a server, within my Ionic 4 application. This is the method that I use to perform the HTTP request:

    getRank(){
      let headers = { headers:  this.authenticationService.getHeadersToken(), withCredentials : true};
      return this.http.get<RankRowsResponse>(this.env.API_URL + 'classificajson.php', headers);
   }

And the method that returns the headers token is:

 getHeadersToken(){
    var headers = new HttpHeaders();
    headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Credentials', "true");
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('Content-Type','application/json');
    console.log('PHPSESSID='+this.token.toString());
    headers.append('cookie','PHPSESSID='+this.token.toString());
    return headers;
  }

When I call the method getRank() Google Chrome prints out this error:

Access to XMLHttpRequest at 'https://www.fantacalciopizza.it/php/classificajson.php' from origin 'http://localhost:8102' has been blocked by CORS policy

I've installed a Chrome Extensions for CORS but the error is still present; how Can I do? Where am I wrong with the request?

Your app doesn't have to provide the CORS headers, the server does. Read https://stackoverflow.com/a/35553666/9423231 — frido, Sep 20 '19 at 13:41

score 1 · Answer 1 · answered Sep 20 '19 at 13:39

1

First, you need to understand what CORS means.

You can start by reading this: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Probably, the domain you are serving your angular app, and the domain you are requesting to are different.

In that case, you need your backend server to be configured as allowing to your angular domain to make requests.

So this is not a problem on Ionic or Angular, but this is more a problem about your backend configuration.

answered Sep 20 '19 at 13:39

cenk ebret

687
4
15

Thank you for your reply. I've followed this guide https://poanchen.github.io/blog/2016/11/20/how-to-enable-cross-origin-resource-sharing-on-an-apache-server, but the problem is still present. From the Google Chrome console I got the response back, but the error is still raised! Where am I wrong? – I love coding Sep 20 '19 at 15:04
Can you share your .conf file, the path of your front end, and the URL you are making a request to? Then we can check. – cenk ebret Sep 23 '19 at 08:54

score 0 · Answer 2 · answered Sep 20 '19 at 14:33

0

When i start i had the same error, i change a lot code on my ionic project, however it was only possible when the changes were made on the server-side.

answered Sep 20 '19 at 14:33

jcmendes98

148
1
10

None. that's what i'm saying. It's on the server side that you need to allow-CORS. Not on Ionic. – jcmendes98 Sep 20 '19 at 15:16
Already done on server side. Now in Google Chrome I got the message, but it is not passed in the Ionic page and I got the same error; where am I wrong? – I love coding Sep 20 '19 at 15:38

Impossible to perform HTTP request with cookie in Ionic

2 Answers2