为什么我在尝试使用 vanilla JS 将数据发布到 API 时收到 422（无法处理的实体）错误？答案

【问题标题】：Why I receive 422( Unprocessable Entity) error when trying to POST data to API using vanilla JS?为什么我在尝试使用 vanilla JS 将数据发布到 API 时收到 422（无法处理的实体）错误？
【发布时间】：2019-11-28 16:46:08
【问题描述】：

我有一个任务与纯 JavaScript 相关，在将数据写入 API 文件时遇到了问题。这是我写的：

document.getElementById('btn').addEventListener("click",function (event) {
    event.preventDefault();
    var countryName = document.getElementById("name").value;
    var countryArea = document.getElementById("area").value;
    var countryPopulation = document.getElementById("population").value;
    var countryCallingCode = document.getElementById("calling_code").value;


    if (countryName !== "" && countryArea !== "" && countryPopulation !== "" && countryCallingCode !== "") {

    var postReq = new XMLHttpRequest();
    postReq.open('POST', '', true);
    var data = {
        area: countryArea,
        calling_code: countryCallingCode,
        created_at: Date.now(),
        id: ID,
        name: countryName,
        population: countryPopulation

    };
        console.log(data.id);
        var jsonPost = JSON.stringify(data);
        postReq.onload = function () {
        var countries = JSON.parse(postReq.responseText);
        if (postReq.readyState == 4 && postReq.status == "201") {
            console.log(countries);
        }
    }

    postReq.send(jsonPost);
    }
});

但我收到 POST 422 (Unprocessable Entity) 的错误。我也写了获取、删除和编辑功能，它们可以工作，所以我不明白为什么这个不起作用。那么也许有人知道为什么会发生这种情况以及如何解决这个问题？

这是一个对我有用的示例代码：

var data = {};
        data.area = 5555;
        data.calling_code = "+25";
        data.name = "Japan";
        data.population = 100000000;

        var url = "";
        var jsonUpdate = JSON.stringify(data);
        console.log(jsonUpdate);
        var updateReq = new XMLHttpRequest();
        updateReq.open("PUT", url + '/3', true);
        updateReq.setRequestHeader('Content-type', 'application/json; charset=utf-8');
        updateReq.onload = function () {
            var countries = JSON.parse(updateReq.responseText);
            if (updateReq.readyState == 4 && updateReq.status == "200") {
                console.table(countries);
            } else {
                console.error(countries);
            }
        }
        updateReq.send(jsonUpdate);

【问题讨论】：

422 - unprocessable entity 表示您发布到服务器的数据被视为格式错误或无效。
我们可以看到您发布的数据，但我们无法看到服务器端的期望。您能否附上适用于您的 GET 方法的数据示例？
@andy 我附加了PUT 方法，因为它比我的GET 方法短得多，但这也有效。
现在客户端选项和猜测结束。什么是你打电话的服务的招摇。如果缺少描述符，您是否有工作数据样本？如果不是，则归咎于服务器本身或缺少其文档。
好的，所以现在你需要水晶球 :) 认真与服务负责人交谈以获得一些指导。方程中有太多变量无法求解

标签： javascript api post xmlhttprequest http-status-code-422

【解决方案1】：

您的created_at 用作格式化日期字符串（在附加的屏幕截图上），例如"2019-07-19 19:53"，而您的POSTing Date.now() 是一个类似1563558732238 的数字。您需要将Date 对象格式化为具有相同模式的人类可读形式，并且您的服务器应该没问题。

编辑：进一步调查表明，即使是正确的数据也没有通过 422 - 必须联系服务器端服务所有者：/

【讨论】：

我改了，还是一样。现在是代码：codepen.io/eglyyt/pen/wVBNRp?editors=0010
paste.pics/03b9a747badf42e34c723428f5a60db0 这是我输入的内容
您还发布了id 设置为ID 一个在您的代码中没有出现的变量，因此它有效地发布了id: null。当您将id: null 添加到发布的数据时，您的PUT 方法会起作用吗？
我忘了提但是ID出现在我的代码中，我读取数据后全局保存，ID是数组的长度，所以每次数组中的行数增加ID 也增加了。
所以服务器端也是你的？可以分享 POST 和 PUT 的服务器代码吗？