jQuery 和 CORS

Posted

技术标签:

【中文标题】jQuery 和 CORS【英文标题】:jQuery and CORS 【发布时间】:2014-01-20 02:22:38 【问题描述】:

如果服务器没有响应 JSONP,我应该如何处理?我用 $.ajax 尝试了几个选项,但无法让它工作。

CodePen Example

//var url = 'https://coinbase.com/api/v1/currencies/exchange_rates';
var url = 'http://blockchain.info/ticker';
$.ajax(
    type: 'GET',
    url: url,
    //jsonpCallback: 'jsonCallback',
    contentType: 'application/json',
    //async: false,
    //dataType: 'jsonp',

    //xhrFields:  
    // for CORS?
    //  withCredentials: false
    //,
    success: function (json) 
        debugger;
    ,
    error: function (json) 
     debugger;
    
);

【问题讨论】:

这有帮助吗? ***.com/questions/17318426/… 我无法更改服务器设置,但我正在尝试使用 XmlHttpRequest 的示例。 【参考方案1】:

您似乎正在尝试向 blockchain.info 发送 AJAX 请求并检索 JSON 提要。幸运的是,他们增加了对 CORS 的支持。

只需将参数cors=true 传递给请求的url(例如http://blockchain.info/ticker?cors=true),您就可以获取数据了。

根据https://blockchain.info/api/blockchain_api,似乎只有少数 API 调用支持 CORS。

【讨论】:

不适用于像blockchain.info/address/…这样简单的东西【参考方案2】:

听起来您正在向不支持 JSONP 的服务器发出跨域请求。

浏览器拒绝来自不希望其数据用于跨域请求的服务器的数据是有充分理由的。如果浏览器不这样做,那么整个网络都会出现大量的安全问题。所以服务器需要允许这个才能工作。

基本上有两种方式服务器可以允许这样做:通过 JSONP 的旧的丑陋方式,但你说它不支持。尽管您仍然可以尝试将您的 url 更改为 'http://blockchain.info/ticker?callback=?' 并将数据类型更改为 jsonp。

但是,还有一种新的、干净的方式使用 CORS 标头。如果服务器在其响应中添加Accept-Control-Allow-Origin: * 标头,则任何人(使用现代浏览器)都可以通过正常的 Ajax 调用使用该数据。

如果服务器不允许你使用它的数据,那你就不走运了。

【讨论】:

【参考方案3】:

请求:

$.ajax(
            url: "http://yoururl",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) 
                var resp = JSON.parse(response)
                alert(resp.status);
            ,
            error: function (xhr, status) 
                alert("error");
            
        );

来自服务器的示例响应(在 Python - Django 中)

response = HttpResponse(json.dumps('"status" : "success"'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")

return response

基本上你必须在服务器端更改响应头。

【讨论】:

以上是关于jQuery 和 CORS的主要内容,如果未能解决你的问题,请参考以下文章

区别和详解:jQuery extend()和jQuery.fn.extend()

js和jquery的区别是啥?

jQuery-jQuery引入和jQuery选择器

jQuery-jQuery引入和jQuery选择器

jquery源码学习—— jquery.prototype主要属性和方法

Jquery 使用和Jquery选择器