How do I send apikey with headers on get request in Angular 7

Question

Please I am trying to use the giphy api endpoint to search for a gif by ID but it always gives me 401 error but I had previously used the api key to search for gifs before and it worked. Please any help will be appreciated

this is what I originally tried,

getASingleGif(){
return this.http.get(`http://api.giphy.com/v1/gifs/xT4uQulxzV39haRFjG&api_key=deokzgUjxm6QHQdp3H3aca1LSZcCpucc`)

}

then I tried

getoneSingleGif(){
const headers = new HttpHeaders();
headers.set('api_key','deokzgUjxm6QHQdp3H3aca1LSZcCpucc')
return this.http.get(`http://api.giphy.com/v1/gifs/xT4uQulxzV39haRFjG`, {headers:headers})

}

please note that 'xT4uQulxzV39haRFjG' is the id of the gif I want to find

Possible duplicate of [Angular HttpClient doesn't send header](https://stackoverflow.com/questions/45286764/angular-httpclient-doesnt-send-header) — penleychan, Aug 29 '19 at 20:24

robert · Answer 1 · 2019-08-29T20:58:43.387

Try this:

sendReq() {
    console.log('sending request')

    const params = new HttpParams()
      .set('api_key', 'deokzgUjxm6QHQdp3H3aca1LSZcCpucc')
      .set('q', 'xT4uQulxzV39haRFjG')
      .set('limit', '25')
      .set('offset', '0')
      .set('rating', 'G')
      .set('lang', 'en');

    // const url = `https://api.giphy.com/v1/gifs/search?api_key=deokzgUjxm6QHQdp3H3aca1LSZcCpucc&q=xT4uQulxzV39haRFjG&limit=25&offset=0&rating=G&lang=en`;

    const url = 'https://api.giphy.com/v1/gifs/search';

    this.http.get(url, { params })
      .subscribe(response => {
        console.log(response);
      });
  }

Stackblitz.

Great - worked a treat for me! – GrahamJ Jan 24 '23 at 13:07 — GrahamJ, Jan 24 '23 at 13:07

score 1 · Accepted Answer · answered Aug 29 '19 at 20:32

never share an api key in StackOverflow.
It looks like this service is expecting the api key as a part of the url as in your first example. The pattern is {url}?{param1_name}={param1_value}&{param2_name}={param2_value} In your example above replace the & with ? and if you need to add any more parameters at the end, then use the & to separate between parameters.

So, in effect: return this.http.get(http://api.giphy.com/v1/gifs/xT4uQulxzV39haRFjG?api_key=deokzgUjxm6QHQdp3H3aca1LSZcCpucc)

Thank you very much for the advice and assist. It works now – Michael Ashefor Aug 29 '19 at 20:37 — Michael Ashefor, Aug 29 '19 at 20:37

How do I send apikey with headers on get request in Angular 7

2 Answers2