如何通过JSONP绕过跨域资源共享（CORS）

17 浏览
0 Comments

如何通过JSONP绕过跨域资源共享（CORS）

请问有人可以帮我弄清楚如何开始使用JSONP吗？

代码：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

Fiddle: http://jsfiddle.net/R7EPt/6/

根据文档的解释，应该会产生一个警报，但是我从文档中也没有找到任何错误。

谢谢。

0

3 答案

0 Comments

如何通过JSONP绕过跨域(CORS)

在回答问题时，你的代码有两个问题：你需要设置jsonp='callback'，并且像你这样在一个变量中添加一个回调函数似乎不起作用。

更新：我写这篇文章的时候，Twitter API刚刚开放，但他们现在已经改变了，并且现在需要身份验证。我修改了第二个例子，使用了一个可行的(2014Q1)的例子，但是现在使用了github。

以下代码不再起作用-习题是，看看你能否用Github API替换它：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

尽管这样alert()一个数组并不是很好...Firebug的"Net"标签会正确显示JSON。另一个有用的技巧是：

alert(JSON.stringify(data));

你也可以使用jQuery.getJSON方法。下面是一个完整的HTML示例，从github获取"gists"列表。这种方式会为你创建一个随机命名的回调函数，即URL中的最后一个"callback=?"。



    
        JQuery (cross-domain) JSONP Twitter example

    你是对的，它不再起作用了。Twitter改变了他们的API。

    0
    0 Comments

    CORS（跨域资源共享）是一种浏览器的安全机制，用于限制不同源（协议、域名、端口）之间的网络请求。CORS的出现是为了防止恶意网站获取用户的敏感信息或执行恶意操作。然而，有时我们需要通过跨域请求获取数据，这就需要绕过CORS限制。

    解决CORS问题的一种方法是使用JSONP（JSON with Padding）。JSONP通过动态创建

    JSONP的使用需要注意以下几点：

    - JSONP是一种早期的技术，现在已经有了更好的解决方案。现代浏览器支持Access-Control-Allow-Origin头部，允许跨域请求。

    - JSONP不能用于表单POST。

    - 在开发生产就绪的脚本时，需要考虑安全性和性能等方面的因素。

    JSONP的工作原理和用法，让我们更好地理解了它的作用和用途。

    0