JSONP 调用显示“Uncaught SyntaxError: Unexpected token :”

Posted 2023-03-03

【中文标题】JSONP 调用显示“Uncaught SyntaxError: Unexpected token :”

【英文标题】：JSONP call showing "Uncaught SyntaxError: Unexpected token : "

【发布时间】：2013-10-10 13:10:25

【问题描述】：

这是我的代码

$.ajax(
        url: 'https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2013/10/4?appId=19d57e69&appKey=e0ea60854c1205af43fd7b1203005d59&callback=?',
        dataType: 'JSONP',
        jsonpCallback: 'jsonCallback',
        type : 'GET',
        async: false,
        crossDomain: true,
        success: function(data) 
            console.log(data);
        
    );

我做错了什么？我应该在这里添加或更改任何内容吗？ 任何帮助，将不胜感激。 谢谢

【问题讨论】：

请在输入前删除空格：'GET'，

这是 JSON，而不是你的 url 上的 JSONP。

async: false 不适用于 JSONP。你为什么使用jsonpCallback 和callback=? crossDomain 不需要跨域请求（讽刺不是吗？）

您请求的 API 似乎不支持 JSONP，或者您错误地使用该 API 来进行 JSONP 响应。

【参考方案1】：

我运行这个

var data = '"rut" : "' + $('#cb_rut').val() + '" , "email" : "' + $('#email').val() + '" ';
var data = JSON.parse(data);

$.ajax(
    type: 'GET',
    url: 'linkserverApi',
    success: function(success) 
        console.log('Success!');
        console.log(success);
    ,
    error: function() 
        console.log('Uh Oh!');
    ,
    jsonp: 'jsonp'

);

并在响应中编辑标题

'Access-Control-Allow-Methods' , 'GET, POST, PUT, DELETE'

'Access-Control-Max-Age' , '3628800'

'Access-Control-Allow-Origin', 'websiteresponseUrl'

'内容类型', '文本/javascript;字符集=utf8'

【参考方案2】：

您正在尝试访问 JSON，而不是 JSONP。

注意您的来源之间的区别：

https://api.flightstats.com/flex/schedules/rest/v1/json/flight/AA/100/departing/2013/10/4?appId=19d57e69&appKey=e0ea60854c1205af43fd7b1203005d59&callback=?

以及实际的 JSONP（一个包装函数）：

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=processJSON&tags=monkey&tagmode=any&format=json

搜索 JSON + CORS/跨域策略，您会发现数百个关于这个主题的 SO 线程。

【讨论】：

我所要做的就是在 URL 中指定 JSONP，就像当前在 URL 中显示的 JSON 一样。谢天谢地，第三方支持基于链接的 JSONP

【参考方案3】：

工作小提琴：

http://jsfiddle.net/repjt/

$.ajax(
    url: 'https://api.flightstats.com/flex/schedules/rest/v1/jsonp/flight/AA/100/departing/2013/10/4?appId=19d57e69&appKey=e0ea60854c1205af43fd7b1203005d59',
    dataType: 'JSONP',
    jsonpCallback: 'callback',
    type: 'GET',
    success: function (data) 
        console.log(data);
    
);

我不得不手动将回调设置为callback，因为这似乎是所有远程服务都支持的。我还更改了 url 以指定我想要 jsonp。

【讨论】：

我觉得您的用户名是“Jason P”非常讽刺。 :)

你必须在某处定义一个名为callback的函数吗？

@ConnorLeech 不，jQuery 会为你创建回调函数。

在我尝试 jsonp 时，我实际上得到了与使用 $.ajax 的 OP 相同的错误，就像我使用 Angular 的 $http 时所做的那样

我仍然收到错误消息...：/ jsfiddle.net/w8e296zj。我看到它只是一个 JSON 响应，因此 JSONP 给出了上述问题。如果我使用 JSON 作为数据类型，我会遇到 CORS 问题。知道如何解决吗？谢谢。