SharePoint REST API with Fetch

Question

Have two requests to the same SharePoint list:

fetch(`https://mysite.sharepoint.com/_api/web/lists/GetByTitle('list')/items(` + id + `)`,
    {method: "GET",
    headers: { "Accept": "application/json; odata=verbose" }}
    )
    .then(response => {
        let test = response;
    })



$.ajax({
    url: "https://mysite.sharepoint.com/_api/web/lists/getbytitle('list')/items(" + id + ")",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        let test = data;
        }
    });

First one returns Failed to load resource: the server responded with a status of 403 (Forbidden)

Second one works fine.

Any ideas?

Answer 1

Seems like by default, the fetch() won't send cookies.

To add that you will have to specify credentials property.

Refer this link for more information - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Please refer below code. It works for me :

payload = {
    method: 'GET',
    headers: { "Accept": "application/json; odata=verbose" },
    credentials: 'same-origin'    // or credentials: 'include'  
}

fetch("https://mysite.sharepoint.com/_api/web/lists/GetByTitle('list')/items(" +id+ ")", payload)
    .then(response => {
        let test = response;
    }
)

Answer 2

Mark Rohits answer as the correct one please

note that fetch can take a Request object, keeping your fetch call clean and readable

console.clear();
var tasks = new Request(
    "/sites/VM/_api/web/lists/GetByTitle('Tasks')/items"
    , {
        method: 'GET',
        credentials: 'same-origin',    // or credentials: 'include'         
        headers: new Headers({
            "Accept": "application/json; odata=verbose",
        })
    });


fetch(tasks)
    .then((response) => response.json())
    .then((data) => {
        let items = data.d.results;
        items.forEach((item) => {
            console.log(item.ID,item.Title);
        });
    });