jQuery AJAX JSONP返回400个错误请求

Question

//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>');
}

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 raw Body发送：

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

但只要我知道，您不能发送JSONP POST请求，因为JSONP请求是如何发出的：使用动态创建的标记。这些请求将始终是GET请求，因此您不能发送原始身体。请在您的developer network选项卡上检查它（请参阅down）。如果要发送POST请求，则必须使用非JSONP请求，并在192.168.2.10:12800服务器上正确设置CORS。在该服务器上设置响应头access-control-allow-origin:http://sitea.com，其中sitea.com是caller页面所在的域。查看关于Access-Control-Allog-Origin头如何工作的更多信息？

不得不提的是，也许JQuery使用了一个技巧，但我认为JSONP不兼容发送POST请求，因为是通过创建一个标记来请求的。

您可以通过浏览器（您知道，用F12打开）的开发者栏中的network选项卡来检查此解决方案和其他解决方案的请求是如何更改的。例如，激活processData：false应该会更改url和请求主体。

不太可能的解决方案：更改数据以指定至少一个参数，这取决于您的API，因此字符串化的数据在一个指定参数下发送，该参数尊重最常用的标准化协议：//host/path/resource？param=value&param=value&param=valueURL格式。

例如，如果希望在名为json的参数下发送数据，则应该使用：

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

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方案，但standard ones不使用没有参数名的json数据形式。因此，您可能希望在POST raw正文中发送json数据，或者发送一个将json字符串化为值的命名参数。

相关问题：使用postman通过raw json发送POST数据，使用json发送数据时总是失败（正文：raw）