Блог

Главная - Вопросы по программированию - Ошибка при выполнении запроса на извлечение в API викторины

Ошибка при выполнении запроса на извлечение в API викторины

#javascript #api #curl #fetch

Вопрос:

Я получаю ошибку при выполнении запроса на извлечение, команда curl работает нормально, что

 curl https://quizapi.io/api/v1/questions -G 
-d apiKey=my_key

но когда я выполняю запрос javascript

 fetch("https://quizapi.io/api/v1/questions", {
  body: "apiKey=my_key",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  method: "POST"
})
   .then((res) => res.json())
   .then((data) => {
      console.log(data);
   });

Я получаю сообщение об ошибке

 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Редактировать

 fetch('https://quizapi.io/api/v1/questions', {
        headers: {
          'X-Api-Key': `${apiKey}`,
        },
      })
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
        });

Комментарии:

1. Возможно, есть больше кода JS, чем вы показываете? Где вы обрабатываете ответ? Если вы пытаетесь использовать response.json() , подтвердили ли вы, что API действительно отвечает с помощью JSON, а не HTML? Вы проверили response.ok , чтобы убедиться, что запрос был успешным?

2. Я обновил код, пожалуйста, проверьте его

3. Если вы запускаете это в браузере, проверьте сетевую панель инструментов разработчика. API, похоже, отвечает с помощью HTML вместо JSON. Вероятно, в ответе сообщается об ошибке

4. Да, ответ на него woops something went wrong (у меня возникли проблемы с API! не в том, чтобы сделать запрос)

Ответ №1:

Вы получаете HTML-ответ (вероятно, ошибка 401). Согласно документам API, вам необходимо передать маркер аутентификации в качестве apiKey параметра или заголовка запроса X-Api-Key .

-G Флаг in curl делает его запросом GET и передает любые параметры данных ( -d ) в строку запроса. Вот тут-то ты и ошибаешься.

Вы отправляете запрос POST через fetch() и пытаетесь отправить учетные данные в теле запроса. Это не сработает.

Попробуйте вместо этого сделать запрос GET и передать учетные данные в заголовке

 fetch("https://quizapi.io/api/v1/questions", {
  headers: {
    "X-Api-Key": apiKey
  },
  // the default method is "GET"
}).then(res => {
  if (!res.ok) {
    throw new Error(res) 
  }
  return res.json()
}).then(console.log).catch(console.error)

Альтернативой является включение apiKey в строку запроса

 const params = new URLSearchParams({ apiKey })

fetch(`https://quizapi.io/api/v1/questions?${params}`)
Метки: