jQuery AJAX JSONP 返回 400 錯誤請求

Question

我正在嘗試使用 jQuery AJAX 將字符串化的 JSON 發送到本地地址。

此地址正在等待接收 JSON 數據。

但是，一旦發送，它就會返回“400 Bad Request”。

//response received as: {"success":"true","packages":["https://example.com/link1.pkg","https://example.com/link2.pkg","https://example.com/link3.pkg"]}

var res = JSON.parse(response); 
var packages = [];

$.each(res.packages, function (i, item) { // put links in array
    packages.push(item);
});

if (res.success) {
    $.ajax({
        url: 'http://192.168.2.10:12800/api/install',
        type: 'POST',
        headers: {
            'Access-Control-Allow-Origin': '*', // cors
            'Content-Type': 'application/json'
        },
        contentType: 'application/json; charset=utf-8',
        dataType: 'jsonp',
        data: JSON.stringify({
            'type': 'direct',
            'packages': packages
        }),
        success: function (response) {
            $('#dynamicModal').find('#response').html('<p>Packages sent!</p>');
        },
        error: function (response) {
            $('#dynamicModal').find('#response').html('<p>Error occurred while sending.</p>');
        }
    });
} else {
    $('#dynamicModal').find('#response').html('<p>Error occurred while gathering links.</p>');
}

我在谷歌上檢查了很多鏈接，90% 的人說 JSON 沒有字符串化，但我的是。 我沒有想法，我希望有人可以幫助我並可能看到這個問題。

這是完整的控制台錯誤：

GET http://192.168.2.10:12800/api/install?callback=jQuery3410603622444131205_1578188027542&{%22type%22:%22direct%22,%22packages%22:[%22http://example.com/EXAMPLE_0.pkg%22,%22http://example.com/EXAMPLE_1.pkg%22,%22http://example.com/EXAMPLE_2.pkg%22,%22http://example.com/EXAMPLE_3.pkg%22,%22http://example.com/EXAMPLE_4.pkg%22,%22http://example.com/EXAMPLE_5.pkg%22,%22http://example.com/EXAMPLE_6.pkg%22]}&_=1578188027543 net::ERR_ABORTED 400 (Bad request)

---

更新

我在本地服務器上找到了失敗的代碼：

static int event_handler(sb_Event* e) {
    const struct handler_desc* descs = NULL;
    handler_cb* handler = NULL;
    char* in_data;
    size_t in_size;
    size_t count;
    size_t i;
    int ret;

    if (e->type != SB_EV_REQUEST) {
        ret = SB_RES_OK;
        goto done;
    }

    if (strcasecmp(e->method, "GET") == 0) {
        descs = s_get_handlers;
        count = ARRAY_SIZE(s_get_handlers);
    } else if (strcasecmp(e->method, "POST") == 0) {
        descs = s_post_handlers;
        count = ARRAY_SIZE(s_post_handlers);
    }
    if (!descs) {
bad_request:
        kick_error(e->stream, 400, "Bad request", "Unsupported method");
        ret = SB_RES_OK;
        goto done;
    }

    for (i = 0; i < count; ++i) {
        if (descs[i].need_partial_match) {
            if (strstr(e->path, descs[i].path) == e->path) {
                handler = descs[i].handler;
                break;
            }
        } else {
            if (strcmp(e->path, descs[i].path) == 0) {
                handler = descs[i].handler;
                break;
            }
        }
    }
    if (!handler) {
        goto bad_request;
    }

    in_data = sb_get_content_data(e->stream, &in_size);

    (*handler)(e->stream, e->method, e->path, in_data, in_size);

    ret = SB_RES_OK;

done:
    return ret;
}

對我來說，這似乎無法獲得s_get_handlers或s_post_handlers ？

Answer 1

最可能的解決方案：將 processData: false 添加到您的參數中，這應該使傳遞給 data 的字符串不被處理並且應該作為 POST 原始正文發送：

if (res.success) {
  $.ajax({
    url: 'http://192.168.2.10:12800/api/install',
    ...
    processData: false,
    data: JSON.stringify({
    ...

但只要我知道你不能發送 JSONP POST 請求，因為 JSONP 請求是如何發出的：使用動態創建的標簽。 這些請求將始終是 GET 請求，因此您不能發送原始正文。 在您的開發者網絡選項卡上檢查它（見下）。 如果要發送 POST 請求，則必須使用非 JSONP 請求並在 192.168.2.10:12800 服務器上正確設置 CORS。 在該服務器上設置了響應頭 Access-Control-Allow-Origin: http://siteA.com其中 siteA.com 是調用者頁面所在的域。 查看更多關於Access-Control-Allow-Origin 標頭如何工作？

我不得不提一下，也許JQuery 使用了一個技巧，但我認為 JSONP 與發送 POST 請求不兼容，因為它是通過創建標簽來請求的。

您可以使用瀏覽器中開發人員欄中的網絡選項卡（您知道，使用 F12 打開）檢查此解決方案以及其他解決方案請求如何更改。 例如激活 processData: false 應該更改 url 和請求正文。

不太可能的解決方案：更改數據以指定至少一個參數，具體取決於您的 API，因此字符串化的數據將在一個命名參數下發送，並尊重最常用的標准化協議：//host/path/resource?param=value&param=value&param=值url 格式。

例如，如果要在名為 json 的參數下發送數據，則應使用：

if (res.success) {
  $.ajax({
    url: 'http://192.168.2.10:12800/api/install',
    ...
    data: {
      json: JSON.stringify({
        'type': 'direct',
        'packages': packages
      })
    },
    ...

原因：如果您從錯誤中分析您的 URL，將其拆分為多個部分：

http://192.168.2.10:12800/api/install

第一個論點：

?callback=jQuery3410603622444131205_1578188027542

第二個（格式錯誤，沒有參數名稱）：

&{%22type%22:%22direct%22,%22packages%22:[%22http://example.com/EXAMPLE_0.pkg%22,%22http://example.com/EXAMPLE_1.pkg%22,%22http://example.com/EXAMPLE_2.pkg%22,%22http://example.com/EXAMPLE_3.pkg%22,%22http://example.com/EXAMPLE_4.pkg%22,%22http://example.com/EXAMPLE_5.pkg%22,%22http://example.com/EXAMPLE_6.pkg%22]}

最后的論點：

&_=1578188027543

第一個是JQuery動態回調，最后一個是反緩存，看起來還可以，但第二部分似乎格式錯誤。 當然你可以使用你自己的 url scheme，但是標准的不使用沒有參數名的那種形式的 json 數據。 因此，您可能想在 POST 原始正文中發送 json 數據，或者發送一個命名參數，並將 json 字符串化為值。

相關問題： 使用郵遞員通過原始 json 發送 POST 數據和使用 json POST 數據時總是失敗（正文：原始）