javascript - 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 调用，但是当我检查请求 header 时，它显示 application/x-www-form-urlencoded并以错误504-网关超时错误

结束

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

编辑:当我尝试使用 Postman 访问该 URL( header 和正文为 JSON)时，得到 200 响应(如预期)。

更新:我了解到表单正在提交，而不是 Ajax 调用，因此采用 Barmar建议并投入return false;在表单 onsubmit 中。现在我不再得到 504 而是得到 405。

以下是当前看到的请求 header :

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

由于您的请求是通过 postman 从本地主机发出的，而不是从浏览器内发出的，因此罪魁祸首可能是 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回复类似问题。