Question

我正在尝试了解JSONP以及何时使用它。我写了下面的代码，能够从服务调用中获取数据，为什么不被阻止？当我从我的本地计算机上运行它，试图从另一台机器请求数据时，是否应该违反同源策略？我下面没有使用JSONP，所以我认为这会被阻止。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
    $.ajax({
        url: 'https://api.github.com/users/robconery',
        type: 'GET',
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#name").text(data.login);
        }
    });
    </script>
</head>
<body>
    <span id="name"></span>
</body>
</html>

Answer 1

JSONP会插入脚本标记，就像在网络上的任何位置包含脚本一样，例如

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

即使是谷歌的域名，你也不会发现任何问题 JSONP是同一个东西，它插入脚本标记，并以这种方式绕过同源策略。

在文件中，JSON被包装在一个函数中，当脚本加载时，调用该函数返回JSON等，这就是JSON被包装在javascript函数中的原因。

jQuery巧妙地将JSONP包装到它的ajax功能中，所以它不会立即显现出来的情况，但它根本不是真正的ajax。

作为旁注，你对Github做的请求是 NOT JSONP，你已经将数据类型设置为json，所以它只是常规的JSON，但是Github绕过了同样的规则 - 原始政策使用Access-Control-Allow-Origin标题和CORS。

Answer 2

你在这里混淆了几件事。

什么是JSONP？

JSONP是一种在不受同源策略影响的情况下检索数据的方法。这是因为JSONP只是动态包含<script>，而<script>不受SOP约束。

什么是SOP？

Ajax请求（即XMLHTTPRequest）。

但是，您没有使用JSONP！

你永远不会告诉jQuery发出JSONP请求！那将是dataType: "jsonp"，而不是dataType: "json"。后者只是告诉jQuery将来自 Ajax 请求的响应作为JSON进行处理。

那么，为什么它仍然有用？

服务器必须通过设置特定标头来禁用SOP（CORS）：

Access-Control-Allow-Origin:*

这正是GitHub API正在做的事情。

Answer 3

这是有效的，因为github API包含Access-Control-Allow-Origin:*响应头。

localhost和跨域请求

3 个答案:

但是，您没有使用JSONP！