如何防止getJSON或类似的ajax请求解析为JSON

Question

我在帮助 SO 的另一个用户时偶然发现了这个问题， 有一个发送 json 格式输出的 web 服务，当查看控制台时似乎没问题，但是当直接使用 getJSON 或类似的 ajax 请求解析它时会触发解析错误：

Unexpected token ':'. Parse error.

虽然这很奇怪，但可以通过获取纯文本来解决，但是服务器需要 JSONP 请求（它没有 CORS 标头）。 我尝试了多种方法来阻止 jQuery 自动解析对 JSON 的响应，但无济于事。如果有人知道如何修复看似不正确的解析错误或首先阻止解析，请告诉我。

到目前为止我尝试过的代码是：

var baseUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885&callback=?";

$.ajax({

  url: baseUrl,
  dataType: 'json',
  crossDomain: true,
  processData: false,

  converters: {"* text": window.String, "text html": true, "text json": true, "text xml": jQuery.parseXML},
  success: function(data){

    $('#output').html(data);
  },
  error:function(jqXHR,status, error){
    console.log(jqXHR);
    console.log(status);
    console.log(error);
    $('#output').html(jqXHR);
  }
});

Jsfiddle：https://jsfiddle.net/6Lwjpjmo/22/

为了让问题更清楚：
当我在 url 中使用带有回调的数据类型 json 或数据类型 jsonp 时，我可以在控制台中看到返回的 json 响应。但它会触发解析错误。
相反，如果我使用数据类型 text 或其他任何内容，则会收到跨域拒绝错误。

Answer 1

将dataType 更改为文本。应该把它作为一个字符串让你用它做你喜欢的事情

var baseUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885&callback=?";

$.ajax({

  url: baseUrl,
  dataType: 'text',
  crossDomain: true,
  processData: false,

  converters: {"* text": window.String, "text html": true, "text json": true, "text xml": jQuery.parseXML},
  success: function(data){

    $('#output').html(data);
  },
  error:function(jqXHR,status, error){
    console.log(jqXHR);
    console.log(status);
    console.log(error);
    $('#output').html(jqXHR);
  }
});

Answer 2

服务器没有返回 JSONP，这是问题的根源。您不能通过 callback=? 并假设服务器将包装响应（它需要成为架构的一部分）。

也就是说，您遇到了两个问题：

1. 服务器未实现 CORS，因此禁止像在同一个域中一样访问数据（基于浏览器安全策略）。
2. 服务器没有将响应包装在提供的回调中，因此 jQuery 没有使用其 jQuery_* 回调函数。

我不熟悉 API，但如果没有特定的方式来获取 JSONP 响应（有些是通过存在 callback 参数激活的，其他是通过请求 URI 等方式激活的）。 )，您在使用 JavaScript 远程检索数据时运气不佳（没有遇到跨域策略）。

--

详细说明：

支持 JSONP 的服务器在与 jQuery 一起使用时，将返回包含在回调中的响应。例如

GET http://server.com/endpoint?callback=Foo

结果如下：

Foo({json})

此服务仍然只是返回{json}（嗯，具体如下）：

{"frames":[ ...snip... ],"frameInterval":60000}

这使得 JSONP 成为失败的选择。

---

使用通过快速 google (jsonp.afeld.me) 找到的代理服务的示例：

var proxyUrl = 'https://jsonp.afeld.me/';
var serviceUrl = "https://acs.leagueoflegends.com/v1/stats/game/TRLH3/1001440043/timeline?gameHash=4725b07311676885";

$.ajax({
  url: proxyUrl + '?url=' + encodeURIComponent(serviceUrl) + '&callback=?',
  dataType: 'jsonp'
}).done(function(data){
  // `data` is a JSO, so serialize it before placing in the #output
  // element (otherwise we'll just see `[object Object]`)
  $('#output').text(JSON.stringify(data, null, '  '));
});