javascript - 未捕获的 SyntaxError : Unexpected token : if JSONP is used, 和 XMLHttpRequest 无法加载仅使用 JSON

Question

我正在尝试使用 JSONP 来绕过同源策略，但据我了解，我遇到了上述错误，因为服务器实际上并未返回 JSONP 响应。但是，如果我使用 json 作为我的数据类型，那么我会收到“XMLHttpRequest 无法加载，请求的资源上不存在‘Access-Control-Allow-Origin’ header ”这是我的代码:

$.ajax({
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?    location=-33.86,151.195&radius=5000&type=ATM&keyword=ATM&key=MyAPIKey",
      type : "GET",
      dataType: 'jsonp',
      success:function(data){
         console.log(data);
      }
    })

类似的问题可以在这里找到[ json Uncaught SyntaxError: Unexpected token : ] 但仅用于了解发生了什么，而不是解决问题。我对此还比较陌生，所以请提供解决此问题的分步指南。

在 Chrome 和 Firefox 上遇到同样的问题。

Answer 1

您似乎缺少回调名称，有一个额外的“type”参数，并且没有使用“data”参数来传递请求参数:

https://learn.jquery.com/ajax/working-with-jsonp/

编辑:我仔细查看了您的代码并在 plunker 中进行了尝试。我试过这个:

$(function(){
$.ajax({
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json",
      data:{
        location:"-33.86,151.195",
        radius:"5000",
        type:"ATM",
        keyword:"ATM",
        key:"MyAPIKey"

      },
      dataType: 'jsonp',
      success:function(data){
         console.log(data);
      },
      error:function(data){
         console.log("err",data);
      }
    })
});

我收到的错误是您的 API key 不正确(ofc，它不正确)。但是，如果您输入正确的 key ，那么 JSONP 调用仍然无法工作，因为您调用的 API 不会返回 JSONP，而是返回 JSON。 (正如您在 URL 末尾看到的那样)。

服务器端应该专门支持 JSONP 才能使用它，因为它应该将响应包装在发出带有数据的回调调用的脚本中。

所以:

• ajax JSONP 调用有效

• 给定的服务器资源不返回 JSONP

您看到的错误是应用程序尝试将结果 JSON 作为脚本执行的结果。

编辑2:

一般来说，“Access-Control-Allow-Origin” header 由服务器在响应中设置。如果您的引荐来源网址与该 header 的设置不匹配，浏览器将执行现在的操作。您无法在请求中控制它。

See for reference on CORS

它全部在服务器端/在浏览器的引擎盖下。但这里有一个类似的问题:

(同一主题的另一个问题)Access-Control-Allow-Origin using Google Maps JavaScript API v3 。

如果可以的话，尝试使用谷歌库。也许它会在请求资源以从您的站点启用 CORS 之前执行其他一些调用。