axios如何设置表单数据类似于jQueryajax的方法？

Question

我在我的应用程序中使用了 axios，但我很难设置请求的内容。

当前使用 $.ajax 调用 URL，如下所示：

$.ajax({
  method: 'POST',
  data: { 'accountId': accountId },
  url: serverUrl,
  /* success: ... */
});

当我在 Chrome 开发工具中查看此请求时，最后我看到如下内容：

现在，我正在尝试用 axios 做同样的事情：

axios.post(serverUrl, { accountId: accountId })
  .then(/* ... */);

但是，当我在 Chrome 开发工具中查看请求时，我有这个：

如何让 axios 进行与 jQuery 相同的格式化？也许问题是：它们是不同的还是只是表示形式？

此外，我注意到 jQuery 调用以某种方式添加了此 header：x-requested-with: XMLHttpRequest，但要在 axios 中具有相同的 header，我必须设置它手动。正常吗？我是否缺少添加此 header 的 axios 配置？

谢谢

Answer 1

如文档所述here, You can use the URLSearchParams API 使用 axios 以 application/x-www-form-urlencoded 格式发送数据。

来自官方文档的示例：

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Answer 2

例如，某些框架使用此 header 来检测 XHR 请求。 Grails Spring 使用此 header 来识别查询 XHR 并给出 JSON 响应或 HTML 响应作为响应。

大多数 Ajax 库（原型、JQuery 和 2.1 版的 Dojo）包括 X-Requested-With header，这表明查询是使用 XMLHttpRequest 而不是运行通过单击常规超链接或提交表单按钮。

安全的一个很好的理由是它可以防止CSRF attacks, because this header can not be added to the cross domain of the AJAX request without the server's consent through CORS。

只允许以下 header：

任何其他人在 CORS 支持的浏览器中调用 "before flight" 请求。

没有 CORS，X-Requested-With 无法添加到具有跨域的 XHR 请求。

如果服务器检查此 header 的存在，它知道该请求没有发起尝试代表来自攻击者域的用户使用 JavaScript 发出请求。

它还会检查请求是否不是从通常的 HTML 表单发送的，如果不使用令牌，从中更难验证它不是跨域。（然而，checking the Origin header can be an option in supported browsers although you leave old browsers vulnerable。）

所以还请阅读以加深理解：

FormData()

请求负载

Axios how to set form data similar to jQuery ajax method?