JSONP - express：为什么浏览器会忽略请求？答案

【问题标题】：JSONP - express: Why does the browser ignore the request?JSONP - express：为什么浏览器会忽略请求？
【发布时间】：2017-06-25 02:42:22
【问题描述】：

我编写了以下 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML page</title>
</head>

<body>
    <script src='http://localhost:3000?callback=mycallbackFunction'> </script>
    <script>
        function mycallbackFunction(data) {
            alert('here');
            alert (data['a']);
        }
    </script>
</body>

</html>

如您所见，脚本标签包含对远程服务器的 JSONP 请求。

另外，我写了如下node.js文件并作为服务器运行：

var express = require('express'); var app = express();

app.get('/', function(req, res) {
   res.jsonp({'a': 'blabla'});
});

app.listen(3000);

在我运行 node.js 文件并使用 html 页面打开浏览器后，我预计会看到一个警报弹出窗口。但不是。我什么也没看到。

开发者工具中的网络选项卡显示请求已被接受：

你知道怎么解决吗？

【问题讨论】：

标签： ajax node.js express jsonp

【解决方案1】：

您需要交换 <script> 元素的顺序。

解释：

Express 正确地提供了一个看起来像 myCallbackFunction({'a': 'blabla'}) 的脚本，这正是您所希望的。但是，此脚本会立即运行，并且 myCallbackFunction 尚未定义，因此没有任何反应。然后，在下一个<script> 块中，您定义myCallbackFunction，但这没有用，因为（失败的）调用已经发生在前面的<script> 中。

此外，mycallbackFunction 中的 C 大小写不匹配 - 请确保回调参数和函数名称之间的大小写一致。

【讨论】：

你是对的。我更改了脚本标签的顺序并修复了“C”并且它有效！

【解决方案2】：

解决方法是切换两个脚本标签的顺序：

<body>
    <script>
        function mycallbackFunction(data) {
            alert('here');
            alert (data['a']);
        }
    </script>
    <script src='http://localhost:3000?callback=mycallbackFunction'>  </script>
</body>

【讨论】：