Question

我有一个文本框和一个搜索按钮。根据用户输入，我想查询Giphy api来获取匹配的Gif。但我的ajax调用总是会出错。任何人都可以帮助我，

false

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

Answer 1

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

阻止加载混合活动内容“http://api.giphy.com/v1/gifs/search?q=test&api_key=dc6zaTOxFJmzC”

这意味着你问什么？这意味着您从http致电https。

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

你会发现它有效。

更新了工作 JSFIDDLE 。

Answer 2

从您的网址中删除 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

有关详细信息，请访问Mixed Content Error (Http/Https)

Answer 3

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

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

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

无法调用GIPHY API

3 个答案: