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

我在 Google 上检查了很多链接，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)

<小时/>

Update

我找到了本地服务器上失败的代码:

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 添加到您的参数中，这应该使传递给数据的字符串不被处理，并应作为 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。这是在该服务器上设置的响应 header Access-Control-Allow-Origin: http://siteA.com其中 siteA.com 是调用者页面所在的域。查看更多 How does Access-Control-Allow-Origin header work?

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

您可以使用浏览器中开发人员栏中的网络选项卡(您知道，使用 F12 打开)检查此解决方案以及其他解决方案的请求如何变化。例如激活 processData: false 应该更改 url 和请求正文。

不太可能的解决方案:更改数据以指定至少一个参数(具体取决于您的 API)，以便数据字符串化在一个尊重最常用的标准化协议(protocol)的命名参数下发送://host/path/resource?param=value&param=value&param=value 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 方案，但标准方案不会使用没有参数名称的 json 数据形式。因此，您可能想在 POST 原始正文中发送 json 数据，或者发送带有 json 字符串化值的命名参数。

相关问题:Send POST data via raw json with postman和 Always failed when POST data with json (body: raw)