Question

我在HTML页面中有一个表单，它执行以下操作：

form method="POST" id="myForm" onsubmit="callSlates();">

Javascript功能如下：

function callSlates(){
    var form=document.getElementById('myForm');

    form.action = "https://dev1-apiservicesweb.dev.jabs.com:8111/api/v1/systems/slates";

    // collect the form data while iterating over the inputs
    var data = {};
    for (var i = 0, ii = form.length; i < ii; ++i) {
        var input = form[i];
        if (input.name == "ID1") {
            data[input.name] = input.value;
        }
        if (input.name == "SDCode") {
            data[input.name] = input.value;
        }
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    xhr.send(JSON.stringify(data));

}
//return false;
}

POST调用正在进行，但是当我检查请求标头时，它显示application/x-www-form-urlencoded并以错误结束 504-网关超时错误

我调用的端点需要json头和JSON数据。我相信我这样做但是当我使用Chrome开发者工具时，我没有看到。是否有一些事情要做与我打电话的方式？

编辑：当我尝试使用Postman点击该网址时，标题和正文为JSON，我得到200响应（正如预期的那样）。

更新：我知道表单已经提交而不是Ajax调用，因此需要Barmar个建议，并在表单中提交return false;。现在我不再 504 而是 405 。

以下是我目前看到的请求标头：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:dev1-apiservicesweb.dev.jabs.com:8111
Origin:http://localhost:3000

在一般信息中，它说：

Request Method:OPTIONS
Status Code:405

根据le_m，这可能是一个CORS问题吗？

Answer 1

由于您的请求是通过邮递员从本地主机处理的，而不是来自浏览器，因此罪魁祸首可能是Same Origin Policy：

您的浏览器尝试发送Cross Origin Request (CORS)。有两种类型的CORS请求：

预检请求：浏览器首先通过发送HTTP OPTIONS请求，然后在批准后发送实际的HTTP请求，向服务器询问支持的HTTP方法。
简单请求：浏览器直接发送实际的HTTP请求。

现在，您的浏览器选择了以上哪项？ MDN表示如果Content-Type是以下之一，则会发送简单请求：

 application/x-www-form-urlencoded
 multipart/form-data
 text/plain

但是，简单请求不允许Content-Type: application/json。因此，您当前发送了预先发出的CORS请求。您可以通过打开开发者控制台来验证在Firefox中：您会注意到您的代码首先发送OPTIONS请求。

现在，此OPTIONS请求收到 405 Method not allowed 错误。这表明服务器不支持预先发出的CORS请求。您需要更改服务器配置或将Content-Type更改为上面列出的兼容之一。如果您的服务器无法接受其中一种内容类型，那么您可能会运气不好。

另请参阅this answer given by @ArslanTariq以回复类似问题。

Answer 2

您并未阻止正常的表单提交。将表单更改为：

void PSubWindow::on_subWindow_tabCloseRequested(int index) {
  QList<QMdiSubWindow*> sub = this->mdiareaContainer->subWindowList();
  qDebug()<< sub[index];
}

<form method="POST" id="myForm" onsubmit="callSlates();return false;">会阻止默认的提交操作。

由于您不想正常提交表单，因此您无需在功能中设置return false;。

XMLHttpRequest JSON发布为form-urlencoded

2 个答案: