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

Question

I have some json data that I have been posting to an API using $.ajax but I would like to update this to use the fetch API. However I seem to have it setup the Fetch API request ends up returning a 403 so I must be missing something but I can't work it out.

Ajax request:

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

Fetch attempt (one of many):

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())

I have tried with various different headers, content encoding and sending the data as form data using:

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
});
...

Any help would be great and if you need any more info let me know

Thanks

Answer 1

To port an existing jQuery.ajax request to fetch, you need to consider that jQuery always includes cookies for you, but fetch does not.

Quoting MDN (emphasis mine):

Note that the fetch specification differs from jQuery.ajax() in mainly two ways that bear keeping in mind:
- The Promise returned from fetch() won't reject on HTTP error status [ ... ]
- By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials header must be sent) .

---

Edit: spec has changed since then, so this should no longer be a problem:

Since Aug 25, 2017. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13 .

So the following (returning to original answer) only applies to "older" browsers.

Thanks David Richmond from comments :)

---

So you get 403 (Forbidden) because your API likely relies on cookies for authentication/authorization (even in your case, where you send a csrfmiddlewaretoken , the server-side framework might still expect a cookie with that -- guessing Django?).

To fix this, add credentials: "same-origin" to your Request (*), like so:

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

(*) Valid options for credentials are:

• omit : Never send cookies. This is the default (and your problem).
• same-origin : Only send cookies if the URL is on the same origin as the calling script.
• include : Always send cookies, even for cross-origin calls.

Answer 2

You say:

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

and

  body: JSON.stringify( payload ) 

JSON Encoding is not the same thing as WWW Form Encoding!

---

You also tried

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

FormData objects are converted to Multipart MIME.

Multipart MIME is also not the same as WWW Form Encoded data.

JSON nested inside Multipart MIME even less so.

---

This question describes how to convert an object ( payload ) into a Form Encoded string.