2

我有一个文本框和一个搜索按钮。根据用户输入，我想查询 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 链接：https ://jsfiddle.net/Appy169/faedybhf/12/

4

3 回答 3

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（“导航”除外） https://developers.google.com/web/fundamentals/安全/防止混合内容/修复混合内容

于 2019-07-17T18:38:20.450 回答
1

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

阻止加载混合活动内容“<a href="http://api.giphy.com/v1/gifs/search?q=test&api_key=dc6zaTOxFJmzC" rel="nofollow noreferrer">http://api.giphy.com/ v1/gifs/search?q=test&api_key=dc6zaTOxFJmzC”</p>

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

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

你会看到它有效。

更新了工作JSFIDDLE。

于 2017-03-03T09:41:57.653 回答
0

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

于 2017-03-03T09:52:52.070 回答