Unable to call GIPHY API

Question

I have a text box and a search button. Based on user input, I want to query Giphy api to fetch matching Gifs. but my ajax call always going to error. Can anybody help me,

 $('#button2').click(function() {
   var srchParam = $('#srcCriteria').val();

   $.ajax({
    url: "http://api.giphy.com/v1/gifs/search?q=dog&api_key=dc6zaTOxFJmzC",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
   alert("hello");
    //console.log(response.data[0].bitly_url);
   },
  error: function(xhr, status, error) {
     alert("bye");
   }
 }); 
});

Here is the jsfiddle link: https://jsfiddle.net/Appy169/faedybhf/12/

Why do you do `var srchParam = $('#srcCriteria').val();` and use `$('#srcCriteria').val();` in the get parameter? — Ionut Necula, Mar 03 '17 at 09:39

score 3 · Answer 1 · answered Jul 17 '19 at 18:38

Use the "upgrade-insecure-requests" CSP directive in the HTML head

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

My issue was the embed_url link (https) redirects to a giffy s3 bucket (http) causing a 'mixed content' error. By setting the "Content-Security-Policy" to "upgrade-insecure-requests", all requests made from your html will be over https (except for 'navigational') https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

score 1 · Accepted Answer · answered Mar 03 '17 at 09:41

1

The problem lies in url on jsfiddle. If you check the console you will see this message:

Blocked loading mixed active content “http://api.giphy.com/v1/gifs/search?q=test&api_key=dc6zaTOxFJmzC”

What this means you ask? It means that you are calling http from https.

Just for testing you can change the url to //api.giphy.com/v1/gifs/search?q=" + $('#srcCriteria').val() + "&api_key=dc6zaTOxFJmzC

and you will see it works.

Updated working JSFIDDLE.

answered Mar 03 '17 at 09:41

Ionut Necula

11,107
4
45
69

check the latest jsfiddle. the images are not loading.. But when opened in new tab they shows up https://jsfiddle.net/Appy169/faedybhf/29/ – Arpita Dutta Mar 03 '17 at 10:40
1

@ArpitaDutta, The url you are now using it's not actually the url to an image, but to a tool/page of the giphy site. Use `response.data[0].images.fixed_height.url` https://jsfiddle.net/faedybhf/30/. Inspect the object `response.data[0].images` you can see that there are multiple sizes. Including original which you can get using `response.data[0].images.original.url` – Ionut Necula Mar 03 '17 at 11:00
1

You are a genious. Thank you AGAIN – Arpita Dutta Mar 03 '17 at 11:08

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

Remove Http from your URL.

var srchParam = $('#srcCriteria').val();
$.ajax({
    url: "//api.giphy.com/v1/gifs/search?q=" + srchParam  +  "&api_key=dc6zaTOxFJmzC",
    type: "GET",
    success: function(response) {
    //alert("hello");
        console.log(response.data);
    },
   error: function (e) {
   alert(e);
   }
});

JSFiddle Example

For more information visit Mixed Content Error (Http/Https)

edited May 23 '17 at 11:53

Community

1
1

answered Mar 03 '17 at 09:52

Govinda Rajbhar

2,926
6
37
62

Also had a similar problem, but it may help others to know that these URL's are case sensitive. If the case is not respected then you may get a "This content is not available" gif. – jon.nicholssoftware.com May 26 '19 at 05:05

Unable to call GIPHY API

3 Answers3