JSONP 不能使用来自 API 的结果

Posted 2023-05-08

技术标签:

【中文标题】JSONP 不能使用来自 API 的结果【英文标题】：JSONP cannot use results coming from API 【发布时间】：2019-07-09 03:46:36 【问题描述】：

我试图运行这个 ajax 请求来获取一堆项目并至少记录它们：

在控制台中，项目显示为未定义：

但在网络选项卡中，我可以看到我试图从 API 调用的项目：

我很困惑，因为没有触发错误或成功功能。

源代码：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="css/fontawesome-free-5.6.3-web/css/all.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/main.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>


<script>
    console.log("alive");

      $.ajax(
                type: "GET",
                url: "http://127.0.0.1:3000/api/stories?callback=items",
                dataType: 'jsonp',
                jsonpCallback: 'items',
                jsonp: 'callback',
                success: function(data) 
                    var strData = JSON.stringify(data);
                    console.log(strData);
                ,
          error: function(xhr,status,error) 
                    console.log(status);
                    console.log(error);
          
      );


    console.log(items());

    </script>
</html>

【问题讨论】：

您的 API 返回的是 JSON，而不是 JSONP。 JSONP 响应看起来像items([ ... ]); 这是对callback 函数的调用，对象作为函数参数。 【参考方案1】：

试试 dataType:JSON 您的 API 返回的是 JSON，而不是 JSONP。

【讨论】：

由于跨域问题不能这样做（api端口与网站不同）对于跨源有一个棘手的解决方法，您可以使用它下载您的问题临时解决。 chrome.google.com/webstore/detail/allow-control-allow-origi/….【参考方案2】：

你有跨域问题吗？你想尝试使用 jsonp 吗？

【讨论】：

是的，这就是我想要做的。

以上是关于JSONP 不能使用来自 API 的结果的主要内容，如果未能解决你的问题，请参考以下文章