Simple get from soundcloud playlist works well in postmann. But Fetch returns status 200 yet no response

Question

So I'm using the GET method with Fetch to get some data from soundcloud. In postman, it works fine. But when i use Fetch I get Status:200 but: 'Failed to load response data: No data found for resource with given identifier'

const soundcloudUrl = 'https://api-v2.soundcloud.com/users/473442966/tracks?client_id=IPz5SBL08EN3FyBabMnvLpb0AAKYGtrd&limit=2&offset=0&linked_partitioning=1&app_version=1645088469&app_locale=en';
/**
 * @param  {string} url=''
 * @param  {string} method
 */
async function getData(url = '', method) {
  console.log(url);


  return fetch(url, {
    method, // *GET, POST, PUT, DELETE, etc.
    mode: 'no-cors', // no-cors, cors, *same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    // credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'text/plain',
      // "Content-Type": "application/x-www-form-urlencoded",
    },
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(), // body data type must match "Content-Type" header
  })
      .then((response) => {
        console.log(response.text());
        return response.text();
      })
      .then((data) => {
        console.log(data);
        data ? JSON.parse(data) : {};
      })
      .catch((error) => {
        console.log(error); // reject(error);
      });
}

/**
 * @param  {object} data
 */
export async function getPodcaststreams(data) {
  const url = new URL('', soundcloudUrl);

  let response;
  try {
    response = await getData(url.href, 'GET');
  } catch (e) {
    return (e);
  }
  console.log(response);
}

Here's my Network response: network response

Here's the response I get in Postman: postman response

Also, if I click the url, I can see the data.

Any ideas good people?

Best regards.

Answer 1

Two things I can see that you are doing wrong here. First is calling response.text() twice. The response can only be read once so

    console.log(response.text());
    return response.text();

will not be able to read response as it has been read already. This is why you are getting an undefined response when you try and parse the data.

Secondly, you don't need to call JSON.parse(data) as the fetch api includes a response.json() method which will parse the response as json. Your getData should look something like this:

async function getData(url = '', method) {
    return fetch(url, {
            method,
            mode: 'no-cors',
            cache: 'no-cache',
            headers: {
                'Content-Type': 'text/plain'
            },
            redirect: 'follow',
            referrer: 'no-referrer',
            body: JSON.stringify()
        })
        .then((response) => {
            return response.json();
        })
        .catch((error) => {
            console.log(error); // reject(error);
        });
}