Question

我正在尝试解决浏览器中出现的错误：

XMLHttpRequest无法加载http://api.giphy.com/v1/gifs/search?q=%3Ca%20href=%22。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。

我看过互联网并看到很多关于更改php文件或服务器文件等信息的主题......但我的应用程序只是带有javascript文件的简单html文件所以我不知道如何制作它工作。导致错误的代码如下：

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>');               
        }
});

}

所以我第一次调用这个方法时没关系，但是如果我再次尝试调用它，我会收到该错误。任何帮助表示赞赏..

Answer 1

跨域ajax请求受限制可能是出错的原因

Answer 2

在请求服务器之前记录网址，似乎格式不正确。

这样做：

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

然后将给定的网址粘贴到新标签中。

如果网址正确，您将看到所请求的资源。所以问题可以通过这种方式解决： http://enable-cors.org/

No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问

2 个答案: