javascript - 使用 jsonp 的 Ajax 调用不起作用， "Uncaught SyntaxError: Unexpected token"

Question

问题

我正在使用开放数据、城市 API 来了解河流水位，但是当我使用 jsonp 进行 ajax 调用时我收到 Uncaught SyntaxError: Unexpected token < 的错误这似乎不是来 self 的 scripts.js

据我了解，我的 ajax 调用可能无法正常工作，因为此 API 只输出 XML或json 。我尝试切换我的 dataType: json ，但是当我这样做时，我收到以下错误。不太确定是否使用 jQuery 的 .getJSON获取这些数据的最佳方法是什么？

数据: http://opengov.brandon.ca/OpenDataService/opendata.html

文档: http://opengov.brandon.ca/api.aspx

错误(切换数据类型:json时)

XMLHttpRequest cannot load http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

脚本.js

$(function(){
    $.ajax({
        url: 'http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel',
        type: 'GET',
        dataType: 'jsonp',
        success: function(response){
            console.log(response)
        }
    });
});

Answer 1

您可能有兴趣阅读What are the differences between JSON and JSONP?

来自服务器的“JSONP 响应”实际上是一个可执行脚本。客户端运行可执行脚本，并且该脚本恰好包含您想要的数据，作为函数的参数提供。如果服务器不提供可执行脚本，则该服务器不支持 JSONP。

对于下一个错误，请参阅 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 。不允许向其他域发出 Ajax 请求，除非服务器明确允许 CORS header (如 Access-Control-Allow-Origin response header )。由于同源策略，一个源上的脚本不允许访问另一源上的内容。跨域资源共享(CORS)是服务器放宽同源策略的一种方式。

我建议联系 API 提供商并请求 CORS 支持。在这种情况下，它实际上就像在响应中提供 Access-Control-Allow-Origin: * header 一样简单。根据 W3C's own security recommendations for CORS :

A resource that is publicly accessible, with no access control checks, can always safely return an Access-Control-Allow-Origin header whose value is "*".

或者，您可以设置一个反向代理服务器，为您获取 API 资源并在您自己的源上提供这些资源，如 Ways to circumvent the same-origin policy 上的答案中所述。 。由于同源策略是浏览器限制，因此您可以让您控制的任何服务器获取 API 资源，然后将响应提供给您的浏览器。