0

I am trying to solve an error I get in my browser :

XMLHttpRequest cannot load http://api.giphy.com/v1/gifs/search?q=%3Ca%20href=%22. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I have looked on the internet and saw many topics about changing some information in php files or server files etc... but my application is just simple html file with javascript file so I don't know how to make it work. The code that is causing the error is below :

var getGifs = function(word) {    
  var xhr = $.get('http://api.giphy.com/v1/gifs/search?q=' + word + '&api_key=dc6zaTOxFJmzC&limit=16');
    xhr.done(function(data) { 

    var linksArray = new Array(16);
    for(var i = 0; i<16; i++){
        var a= data.data[i].images.fixed_height.url;
        linksArray[i] = a;          
    }
     for (var i=0; i<16; i++) {                

         $('#gifs .row').append('<div class="col-sm-3"><div class="img-wrapper"><img class="col-sm-12 gif-img" src="' + 
                                linksArray[i]+  '"/>' +
                               '<div class="source-button btn btn-primary btn-sm">Use</div></div></div>');               
        }
});

}

So the first time I call the method it's ok but if I try to call it another time I get that error. Any help is appreciated..

sparta123
  • 31
  • 3

2 Answers2

-1

Cross domain ajax request is restricted may be this is reason for error

Somil
  • 567
  • 5
  • 13
-1

log the url before request it to the server, it seems to be malformed.

Do this:

console.log('http://api.giphy.com/v1/gifs/search?q=' + word + '&api_key=dc6zaTOxFJmzC&limit=16')

Then paste the given url in a new tab.

If the url is correct you will see the requested resource. So the problem can be solved by this way: http://enable-cors.org/

k1r0s
  • 359
  • 3
  • 14