JQuery 和 XHR——使用 CORS 的跨站点 JSON POST答案

【问题标题】：JQuery and XHR -- Cross-site JSON POST with CORSJQuery 和 XHR——使用 CORS 的跨站点 JSON POST
【发布时间】：2014-06-19 09:54:38
【问题描述】：

我正在制作一个小型 UI，以使用 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提示有错误。

这是完整的错误：

"[异常..."失败"nsresult:"0x80004005 (NS_ERROR_FAILURE)" 位置：“JS框架:: http://server.company.com/mr/js/jquery-1.11.0.min.js::.send:: 行 4" 数据：无]"

200 之后的部分是我期望作为响应的 JSON 对象。我不知道怎么去。 “Via”之后的部分是默认的 CastIron 标头，显示每个过程花费了多长时间。我不确定这些是否以错误的顺序发布，或者问题是什么。

编辑（2014 年 5 月 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

【问题讨论】：

无法在发布的图像上清楚地查看错误消息。如果可能，可以将错误消息文本发布到原始帖子吗？谢谢
你需要使用“jsonp”作为数据类型或者试试这个链接stackoverflow.com/questions/7157455/…
@guest271314 - 很抱歉。我删除了图像并粘贴了文本。
简单如馅饼：Same Origin Policy你搞砸了
@epascarello - 外部服务器能够接收我的 JSON 对象，这意味着什么？

标签： javascript jquery ajax json jqxhr

【解决方案1】：

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

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

原来她的回复没有发送这些标头。在阅读了CORS 和Debugging CORS in Firebug 之后，我能够弄清楚。

【讨论】：

【解决方案2】：

试试这个（模式）

更新

$(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-settings (data, dataFilter, processData)

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

【讨论】：

看起来很有希望，但它返回“更新不成功。状态：（一个空字符串）'。我想要的字符串仍然在 200 之后，就像屏幕截图中一样。
如果可以的话，可以发帖url吗？来自服务器 json 的响应？谢谢
不确定你的意思。该 URL 在我的原始代码 (http://cirun2/Impact/CreateImpacts) 中，但只能从我们的网络访问。我期待的响应是在控制台中的“200”之后。它看起来像这样：{"caseURL":{"caseURL":"https://cs18.salesforce.com/50060000008ugtSAAQ"}}
'更新失败。状态：'（然后是一个包含状态文本的对象："[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://myserver.mycompany.com/mr/js/jquery-1.11.0.min.js :: .send :: line 4" data: no]"。与上面相同的错误。它正在捕获“失败”条件。
我想我需要转换为 JSONP。我已通过电子邮件向 CastIron 管理员发送电子邮件以更改回复的外观，并将其包装在函数调用中。

【解决方案3】：

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

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

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

如有错误请指正。

【讨论】：