将数据发布到 expressjs 的简单 xmlhttprequest 问题答案

【问题标题】：Issue on simple xmlhttprequest with post data to expressjs将数据发布到 expressjs 的简单 xmlhttprequest 问题
【发布时间】：2020-04-01 09:59:33
【问题描述】：

使用 nodejs、xmlhttprequest 获取简单的表单发布数据。
使用 formdata() 构造函数从 html 中获取值。但是在
expressjs，请求正文未正确获取。它抛出了
以下错误。通过
发布数据会有什么问题下面的代码。

HTML：

> <form id='loginForm'>
>       <div>
>         <label>Username:</label>
>         <input type="text" name="title" />
>         <br/>
>       </div>
>       <div>
>         <label>Password:</label>
>         <input type="password" name="descr" />
>       </div>
>       <div>
>         <input type="submit" value="Submit" />
>       </div>
>     </form>

脚本：

window.onload = function () {
var testForm = document.getElementById('loginForm');
testForm.onsubmit = function(event) {
    event.preventDefault();
    const XHR = new XMLHttpRequest();
    var formData = new FormData(testForm);
    XHR.open( "POST", "http://localhost:5000/addCat", true);
    XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    XHR.send(formData);
}
}

但在 expressjs 调用：

const addCategories = (request, response) => {
  const { title, descr } = request.body
  console.log(request.body);

// output: { '------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name': '"title"\r\n\r\nsdsf\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\nsdfdsfds\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="title"\r\n\r\nnewtitle\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7\r\nContent-Disposition: form-data; name="descr"\r\n\r\ngoind descriptions\r\n------WebKitFormBoundaryxBFmvN6Sw8QT3BA7--\r\n' }


  client.query('INSERT INTO categoryLists (title, descr) VALUES ($1, $2)', [title, descr], (error, results) => {
    if (error) {
      throw error
    }
    response.status(201).send(`User added with ID: ${results.insertId}`)
  })
};

出现错误： 错误：“标题”列中的空值违反非空约束

【问题讨论】：

标签： javascript node.js forms express xmlhttprequest

【解决方案1】：

你说过：

XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

...但是FormData 对象生成多部分格式的请求，而不是 urlencoded 的请求。

删除该行。让 XHR 从 FormData 对象生成自己的 Content-Type 标头。

您还需要确保在您的 Express.js 代码中拥有能够处理多部分数据的正文解析器。

【讨论】：

- 是的，我已删除，但同样的错误。 - 我也在 indexjs 文件中使用正文解析器。 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true, })); 3.该错误还会引发一些连接错误并破坏应用程序。在 emitOne (events.js:116:13) 在 TLSSocket.emit (events.js:211:7) 在 addChunk (_stream_readable.js:263:12) 在 TLSSocket.Readable 的 readableAddChunk (_stream_readable.js:250:11) .push (_stream_readable.js:208:10) 在 TLSWrap.onread (net.js:597:20)
@user3686652 — 我说的是“能够处理多部分数据的正文解析器”，而您正在使用能够处理 JSON 编码数据和 URL 编码数据的解析器。
使用v1.19.0 body parser & JSON, RAW, urlencoded, text 都支持。
@user3686652 — 您需要多部分支持！阅读body-parser module文档的前几段