将jquery ajax POST请求更改为fetch api POST

Question

我有一些使用$ .ajax发布到API的json数据，但我想对其进行更新以使用fetch API。 但是，我似乎已经设置了Fetch API请求，但最终返回了403，因此我必须丢失某些内容，但无法解决。

Ajax请求：

$.ajax({
        type: 'POST',
        url: url,
        data: {
            'title': data.title,
            'body': data.body,
            'csrfmiddlewaretoken': csrf_token,
            'request_json': true
        },
        success: function (data) {
            console.log(data)
        }
    });

尝试获取（众多）之一：

let payload = {
    'title': data.title,
    'body': data.body,
    'csrfmiddlewaretoken': csrf_token,
    'request_json': true
}

let request = new Request(url, {
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body:  JSON.stringify( payload )
});

fetch(request)
        .then((response) => {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            return response;
        })
        .then((response) => response.json())

我尝试了各种不同的标题，内容编码并使用以下形式将数据作为表单数据发送：

let form_data = new FormData();
form_data.append( "json", JSON.stringify( payload ) );

let request = new Request(url, {
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body:  form_data
});
...

任何帮助都会很棒，如果您需要更多信息，请告诉我

谢谢

Answer 1

要移植现有的jQuery.ajax请求以进行提取，您需要考虑到jQuery始终为您提供cookie，而fetch则不包括。

引用MDN （强调我的名字 ）：

请注意，fetch规范与jQuery.ajax（）的主要区别在于两个方面：
-从fetch（）返回的Promise不会拒绝HTTP错误状态[...]
-默认情况下， 如果站点依赖于维护用户会话（要发送cookie，必须发送凭据标头） ，则fetch不会从服务器发送或接收任何cookie ， 从而导致未经身份验证的请求 。

---

编辑：从那时起规格已经改变，所以这应该不再是问题：

从2017年8月25日开始。 该规范将默认凭据策略更改为同源。 从61.0b13开始，Firefox进行了更改 。

因此，以下内容（返回原始答案）仅适用于“较旧的”浏览器。

感谢David Richmond的评论:)

---

因此，您得到403（禁止访问），因为您的API可能依赖于cookie进行身份验证/授权（即使在您的情况下，您发送csrfmiddlewaretoken ，服务器端框架可能仍会希望有一个cookie —猜测是Django？）。

要解决此问题， 请在Request （*）中添加credentials: "same-origin" ，例如：

let request = new Request(url, {
    method: 'post',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
});

（*） credentials有效选项是：

• omit ：永远不要发送cookie。 这是默认设置（也是您的问题）。
• same-origin ：仅当URL与调用脚本的起源相同时才发送cookie。
• include ：始终发送cookie，即使是跨域调用也是如此。

Answer 2

你说：

 'Content-Type': 'application/x-www-form-urlencoded' 

和

  body: JSON.stringify( payload ) 

JSON编码与WWW表单编码不同！

---

您也尝试过

 form_data.append( "json", JSON.stringify( payload ) ); 

FormData对象将转换为Multipart MIME。

多部分MIME也与WWW表单编码数据不同。

嵌套在Multipart MIME中的JSON更是如此。

---

这个问题描述了如何将一个对象（ payload ）转换成一个Form Encoded字符串。