Get Request work in postman but doesn't work in browser

Question

I have web application that uses Angular7 in client side and CakePHP in Api I was using Basic Authentication then I replace it with Token Authentication all request work fine, except one which works fine only in Postman but in browser it's weird because it seems that there is issue with authentication but couldn't know the reason.

The request should return a blob to download the file, so I use FPDI in CakePHP to return pdf

Here is request in postman

Postman Header

Date →Wed, 15 May 2019 12:02:44 GMT
Server →Apache/2.4.33 (Win32) OpenSSL/1.0.2n PHP/5.6.35
X-Powered-By →PHP/5.6.35
Content-Disposition →inline; filename="doc.pdf"
Cache-Control →private, max-age=0, must-revalidate
Pragma →public
Access-Control-Allow-Origin →*
Keep-Alive →timeout=5, max=100
Connection →Keep-Alive
Transfer-Encoding →chunked
Content-Type →application/pdf

Postman Body Request on Chrome Working request using Basic Auth using FireFox

Call request

    getWorkListPdf(id: number, cem_id?: number) {
    let uri = `${this.workSessionsUrl}workList/${id}`;
    let params = new HttpParams();
    if (cem_id) {
      params = params.set('cemetery_id', cem_id.toString());
    }
    const Auth = localStorage.getItem("AuthenticationToken");
    let header = new HttpHeaders();
      header = header.append("AuthenticationToken", Auth);
    return this.dataService.get(uri,{ headers: header, params: params, responseType: 'arraybuffer'  })
    .pipe(
      map(res => {
                  return res;
                }
      )
    );
  }

Any help is much appreciated!

Solution 1

The issue was that Api can't identify that the request which contains the required header info for Authentication, I added Authentication array in AppController to allow using both Basic Auth and Token Auth when receiving json request, this work fine for all requests except for this one ( Download pdf ) I've tried to add

$this->Auth->authenticate['Token'] = array(
                'fields' => array(
                ),
                // 'parameter' => '_token',
                'header' => 'AuthenticationToken',
                'scope' => array(
                    'User.permission_api_login' => true
                )
        );

again in Controller and it works fine!!. it seems that it can identify the Token now and return a valid file!

Solution 2

If I fully understand you want to authenticate with a bearer token instead of basic authorization. In case you want basic, you can use the following headers in your request:

const httpOptions = {
    headers: new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + btoa('username:password')
    })
};

In case of bearer authorization, you can do the following:

const httpOptions = {
    headers: new HttpHeaders({ 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + JSON.parse(your token)
    })
};

Hope it helps!

Solution 3

Add withCredentials true in your request.

const httpOptions = {
    headers: new HttpHeaders({
        'Accept': "application/json",
        'Content-Type': "text/plain;charset=UTF-8",
        'Authorization': 'Bearer ' + JSON.parse(your token)
    }), withCredentials: true
};

Comments

[Kenana Reda]

I don't have issue applying the authentication, but it seems that there is issue with token authentication for this request, plz have a look on chrome request, Why there is no AuthenticationToken in Request Headers

[Kenana Reda]

Thanks for answering! but when use withCredentials: true it only send Options Request and doesn't send Get Request after that!

[vinod beloshe]

For sending Cookie by using Angular with php we need to add withCredentials:true. You have to do same changes in Serverside also. I dont't have much idea about cakephp but you can do like this : private function setCorsHeaders() { $this->response->cors($this->request) ->allowOrigin(['*']) ->allowMethods(['*']) ->allowHeaders(['x-xsrf-token', 'Origin', 'Content-Type', 'X-Auth-Token']) ->allowCredentials(['true']) ->exposeHeaders(['Link']) ->maxAge(300) ->build(); }