XMLHttpRequest JSON Post 格式为 urlencoded

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-Gateway Timeout Error

我调用的端点需要 json 标头和 JSON 数据。我相信我正在这样做，但是当我使用 Chrome 开发人员工具时，我看不到这一点。是否与拨打电话的方式有关？

编辑：当我尝试使用 Postman 访问该 URL 时，标头和正文为 JSON，得到 200 响应（如预期的那样）。

更新：我知道提交的是表单而不是 Ajax 调用，因此接受了 Barmar 建议并将 return false; 放入表单 onsubmit。现在我不再获得 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 方法，方法是发送 HTTP OPTIONS 请求，然后在批准后发送实际的 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

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

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

return false; 阻止默认提交操作。

你的函数也不需要设置form.action，因为你不想正常提交表单。