无法调用 GIPHY API

Question

我有一个文本框和一个搜索按钮。根据用户输入，我想查询 Giphy api 以获取匹配的 Gif。但是我的 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 link：https://jsfiddle.net/Appy169/faedybhf/12/

Answer 1

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

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

你问这是什么意思？这意味着您正在从 https.

调用 http

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

你会看到它有效。

更新工作 JSFIDDLE.

Answer 2

从您的 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 Example

有关详细信息，请访问

Answer 3

在 HTML 头中使用 "upgrade-insecure-requests" CSP 指令

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

我的问题是 embed_url link (https) 重定向到 giffy s3 存储桶 (http) 导致 'mixed content' 错误。通过将 "Content-Security-Policy" 设置为 "upgrade-insecure-requests"，从您的 html 发出的所有请求都将通过 https（'navigational' 除外） https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

无法调用 GIPHY API

Unable to call GIPHY API

jquery

ajax

giphy

giphy-api