如何在POST请求中使用XMLHttpRequest正确传递附加参数？

Question

阅读 https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html 文档 在 laravel 8 / jquery 3.6 / app 中，我在 ckeditor5 的内容中上传文件，我需要从 app.js 传递一个附加参数 我没有找到如何在 POST 请求中传递附加参数。

在网络中搜索我发现XMLHttpRequest抛出InvalidSateError说“对象状态必须打开”分支 并尝试使用 xhr.send 参数，例如：

_initRequest() {
    const xhr = this.xhr = new XMLHttpRequest();
    var csrf = document.querySelector('meta[name="csrf-token"]').content;
    xhr.open( 'POST', '/admin/news-upload-file-into-ckeditor', true );

    xhr.send('POST', 'newsId=100', true); // I TRY TO PASS ADDITIVE PARAMETER

    xhr.setRequestHeader('x-csrf-token', csrf);
    xhr.responseType = 'json';
}

但出现错误消息警报：

InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

图像未上传。 如何正确传递附加参数？

Answer 1

请参阅第 3 点解决错误。

我注意到的一些事情：

1. send()

   的

   XMLHttpRequest

   方法只能接受一个参数——请求体（参见MDN文档）
2. 您应该将 URL 参数移至

   open()

   方法的 url，因此 url 应变为

   /admin/news-upload-file-into-ckeditor?newsId=100

3. setRequestHeader()

   必须在

   send()

   之前和

   open()

   之后调用，所以把它放在两者之间。 这就是您收到错误的原因
4. 通常 POST 请求不应该接受 GET 参数，因为这是不语义且不标准的。如果您是创建端点的人，我建议您将其更改为 GET 端点或使其不接受任何 URL 参数