无法调用GIPHY

Question

我有一个文本框和一个搜索按钮。基于用户输入，我想查询Gifs来获取匹配的Gifs。但是我的ajax调用总是会出错。有人能帮我吗，

 $('#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");
   }
 }); 
});

以下是jsfiddle链接：https://jsfiddle.net/Appy169/faedybhf/12/

Answer 1

问题在于url在jsfiddle上。如果您检查控制台，您将看到以下消息：

阻塞加载混合活动内容“key=dc6zaTOxFJmzC”

你问什么意思？这意味着您正在从http调用https。

只是为了测试，您可以将url更改为//api.giphy.com/v1/gifs/search?q=" + $('#srcCriteria').val() + "&api_key=dc6zaTOxFJmzC

你会发现它起作用的。

更新的工作JSFIDDLE。

Answer 2

在HTML头中使用“升级-不安全-请求”CSP指令。

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

我的问题是embed_url链接(https)重定向到一个令人头晕目眩的s3桶(http)，导致了一个“混合内容”错误。通过将“内容-安全-策略”设置为“升级-不安全-请求”，从html发出的所有请求都将通过https (‘导航’除外) https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content。

Answer 3

从您的URL中删除Http。

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实例

欲了解更多信息，请访问混合内容错误(Http/Https)