SharePoint REST API with Fetch POST

Question

Trying to create list item:

let data = new FormData();
data.append("__metadata", JSON.stringify({ "type": itemType }));
data.append("Title", 'newItemTitle');

return fetch(_spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items", {
    method: "POST",
    credentials: 'same-origin',
    body: data,
    headers: { 
        "Accept": "application/json; odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()            
    }
}).then(
        response => response.json())
        .then( 
            (r: any) => r.d.results);
}

Got following error: 415 Unsupported Media Type

In Request Payload:

------WebKitFormBoundaryFSelaakwmV2hvl6e Content-Disposition: form-data; name="__metadata"

{"type":"SP.Data.MyListItem"} ------WebKitFormBoundaryFSelaakwmV2hvl6e Content-Disposition: form-data; name="Title"

newItemTitle ------WebKitFormBoundaryFSelaakwmV2hvl6e--

---

---

---

Meanwhile JQuery ajax request works fine: 201 Created

var item1 = {
    "__metadata": { "type": itemType1 },
    "Title": 'newItemTitle'
};

$.ajax({
    url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
    type: "POST",
    contentType: "application/json;odata=verbose",
    data: JSON.stringify(item1),
    headers: {
        "Accept": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function (data) {
        var i = data;
    },
    error: function (data) {
        var i = data;
    }
});

Request Payload:

{"__metadata":{"type":"SP.Data.MyListItem"},"Title":"newItemTitle"}

Any ideas how Fetch could be used to create list item? I assume that Request Payload format has to be JQuery-like...

---

---

Update:

Thanks to wjervis here is working example:

var item = {
    'Title': 'newItemTitle'
};


return fetch(_spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items", {
    method: "POST",
    credentials: 'same-origin',
    body: JSON.stringify(item),
    headers: { 
        "Accept": "application/json; odata=nometadata",
        "Content-Type": "application/json;odata=nometadata",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()            
    }
})

Answer 1

The content-type header is missing from your fetch request:

fetch(odataurl, {
    method: "POST",
    credentials: 'same-origin',
    body: JSON.stringify(body),
    headers: { 
        "Accept": "application/json; odata=nometadata", // or odata=verbose|minimalmetadata  (minimalmetadata is default if odata not specified)
        "Content-Type": "application/json; odata=nometadata", // or odata=verbose|minimalmetadata  (minimalmetadata is default if odata not specified)
        "X-RequestDigest": $("#__REQUESTDIGEST").val()            
    }
});