JQuery和XHR - 使用CORS进行跨站点JSON POST

时间:2014-05-02 16:27:50

标签: javascript jquery ajax json jqxhr

我正在使用jQuery将一个JSON对象提交给外部CastIron服务器(而不是服务器类型对于这个问题很重要)。初始发送工作正常,但我没有收到服务器的响应。这是jQuery的样子:

$.ajax({
        url: 'http://cirun2/Impact/CreateImpacts',
        type: "POST",
        data: JSON.stringify(myobj),
        dataType: 'text',
        async: false,
        //beforeSend: function(xhr){
        //      xhr.setRequestHeader(
        //},
        complete: function(returned_data) {
                $('#output').append("<p>Submitted successfully to CastIron. Returned data: " + returned_data + "</p>");
        },
        error: function(error_text) {
                console.log("Update unsuccessful. Status: ", error_text);
        }
});

我得到'成功提交给CastIron。返回数据:[object Object]'消息,但它不显示文本,而firebug表示存在错误。

Firebug response

这是完整的错误:

  

“[例外......”失败“nsresult:”0x80004005(NS_ERROR_FAILURE)“   位置:“JS框架::   http://server.company.com/mr/js/jquery-1.11.0.min.js :: .send :: line   4“数据:否]”

200之后的部分是我期待作为响应的JSON对象。我不知道该怎么做。 “Via”之后的部分是默认的CastIron标题,显示每个进程花了多长时间。我不确定这些是以错误的顺序发出,还是问题是什么。

编辑(2014年7月7日):我做了更多的事情,我想我遗漏了一条至关重要的信息。我正在尝试使用CORS。这是我的标题。标题是否可以正确提交,但返回值不正确?

Response Headers
Access-Control-Allow-Head...    X-Requested-With
Access-Control-Allow-Orig...    *
Connection  keep-alive
Content-Length  288
Content-Type    application/json; charset=utf-8
Date    Wed, 07 May 2014 14:34:51 GMT
X-Powered-By    Express

Request Headers
Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Host    myserver.mycompany.com:4000
Origin  http://ironsides.zayo.com
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0

3 个答案:

答案 0 :(得分:4)

它最终成为CastIron服务器的不正确的标头。我让CI管理员将返回代码修复为“200 OK”,并让她添加以下标题:

Access-Control-Allow-Origin: *    
Access-Control-Allow-Headers: X-Requested-With

原来她的回答是没有发送这些标题。在阅读CORSDebugging CORS in Firebug后,我能够弄明白。

答案 1 :(得分:3)

试试这个(模式)

更新

$(function () {
    var callback = function (results) {    
        $("#output")
        .append("<p>Submitted successfully to server. Returned data: " 
        + JSON.stringify(results.caseURL) + "</p>")    
    };
    var myobj = {
        "caseURL": {
            "caseURL": "https://cs18.salesforce.com/50060000008ugtSAAQ"
        }
    };

    var request = $.ajax({
        url: "/echo/json/",
        data: {
            json: JSON.stringify(myobj)
        },
        type: "POST",
        dataType: "json"
    });
    request.done(function (data, textStatus, jqxhr) {
        if (textStatus === "success" && jqxhr.responseJSON) {
            console.log(data, jqxhr.responseJSON, jqxhr.responseText);
            if (data.hasOwnProperty("caseURL")) {
                callback(data)
            };
        };
    });
    request.fail(function (jqxhr, textStatus, error_text) {
        if (textStatus != "success") {
            console.log("Update unsuccessful. Status: ", error_text, 
            textStatus, jqxhr.getAllResponseHeaders());
        };
    });
})

updated jsfiddle

http://doc.jsfiddle.net/use/echo.html#json

http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settingsdatadataFilterprocessData

http://api.jquery.com/jQuery.ajax/#sending-data-to-server

答案 2 :(得分:0)

POST请求的内容类型仅限于application / x-www-form-urlencoded,multipart / form-data或text / plain for CORS。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

请参阅“访问控制方案示例”&gt;“简单请求”

如果错误,请纠正我。