Fetch дает пустое тело ответа

У меня есть приложение response/redux, и я пытаюсь выполнить простой запрос GET для сервера:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

Проблема в том, что тело ответа пусто в функции .then(), и я не уверен, почему. Я проверил примеры онлайн, и похоже, что мой код должен работать, поэтому я, очевидно, что-то пропустил. Дело в том, что если я проверю вкладку сети в инструментах Chrome dev, запрос будет сделан, и я получу данные, которые я ищу.

Может ли кто-нибудь светить на этом свете?

EDIT:

Я попытался преобразовать ответ.

с помощью .text():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

и .json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then((response) => {
  console.log(response.body);
  return dispatch({
    type: "GET_CALL",
    response: response.body
  });
})
.catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input

Поиск в инструментах Chrome:

Ответы

Ответ 1

Я просто столкнулся с этим. Как упоминалось в этом , использование mode: "no-cors" даст вам opaque response, который, похоже, не возвращает данные в теле.

opaque: ответ на запрос "no-cors" на ресурс кросс-происхождения. строго ограничен.

В моем случае я использовал Express. После того, как я установил cors for Express и настроил его и удалил mode: "no-cors", мне было обещано. Ответные данные будут в обещании, например.

fetch('http://example.com/api/node', {
  // mode: 'no-cors',
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
},
).then(response => {
  if (response.ok) {
    response.json().then(json => {
      console.log(json);
    });
  }
});

Ответ 2

Вам нужно будет преобразовать response в json, прежде чем вы сможете получить доступ к response.body

Из docs

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('parsed json', json) // access json.body here
  })

Ответ 3

Вы должны прочитать тело ответа:

fetch(url)
  .then(res => res.text()) // Read the body as a string

fetch(url)
  .then(res => res.json()) // Read the body as JSON payload

Как только вы прочтете тело, вы сможете манипулировать им:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
  .then(response => response.json())
  .then(response => {
    return dispatch({
      type: "GET_CALL",
      response: response
    });
  })

Ответ 4

Попробуйте использовать response.json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.json()); // null
  return dispatch({
    type: "GET_CALL",
    response: response.json()
  });
})
.catch(error => { console.log('request failed', error); });

Ответ 5

fetch("http://localhost:8988/api", {
    method: "GET",
    headers: {
       "Content-Type": "application/json"
    }
})
.then((response) =>response.json());
.then((data) => {
    console.log(data);
})
.catch(error => {
    return error;
});

Ответ 6

fetch("http://localhost:8988/api", {
        //mode: "no-cors",
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        return data;
    })
    .catch(error => {
        return error;
    });

Это работает для меня.

Ответ 7

Во многих случаях вам нужно будет добавить модуль bodyParser в ваше приложение экспресс-узла. Тогда в вашей части app.use ниже app.use(express.static('www')); добавить эти 2 строки app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json());