Как использовать API с непрозрачным ответом? - PullRequest
Новая
       22

Как использовать API с непрозрачным ответом?

0 голосов
/ 21 октября 2019

Я пытался использовать этот API Cat Facts примерно так: 

const URL = "https://catfact.ninja/fact?limit=1" // In browser, this displays the JSON

fetch(URL).then(response=> {
        console.log(response);
        return response.json();
    }
);

, но я получил

Запрос перекрестного происхождения заблокирован: тот же источникПолитика запрещает чтение удаленного ресурса в https://catfact.ninja/fact?limit=1. (причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin').

TypeError: NetworkError при попытке извлечь ресурс.

поэтому после попытки с 

fetch(URL, {mode:'no-cors'})
    .then(response=> {
        console.log(response);
        return response.json();
    }
);

я теперь получаю

Response {тип: "непрозрачный", URL: "", перенаправленный: ложный, статус: 0,ok: false, statusText: "", заголовки: Headers, body: null, bodyUsed: false}

SyntaxError: JSON.parse: неожиданный конец данных в строке 1 столбца 1 данных JSON

Из здесь я понимаю, что я не смогу использовать этот API по назначению. Но если да, то каково его назначение и как оно предназначено для использования ( эта информация не учитывает проблему)?

Ответы [ 2 ]

2 голосов
/ 21 октября 2019

Непрозрачный ответ - это тот, который вы не видите в содержимом. Они сами по себе бесполезны.

Установка mode: 'no-cors' - это объявление о том, что вам не нужно читать ответ (или делать что-либо еще, требующее разрешения CORS).

ДляНапример, JavaScript может отправлять аналитические данные для записи на сервере.

Это позволяет отправлять данные без получения сообщений об исключениях в консоли JS (что будет (а) выглядеть плохо, если кто-нибудь откроет его и (б) залить консоль нежелательной, что затрудняет поиск реальных ошибок).

В стороне: "Access-Control-Allow-Origin": "*" - заголовок response . не поставить его по запросу. Это ничего не даст и может превратить простой запрос в предварительно выданный запрос.

0 голосов
/ 21 октября 2019

Добавление {mode: 'no-cors'} не является универсальным для ошибок CORS. Возможно, вам лучше использовать CORS Proxy .

Этот вопрос также может быть вам полезен.

В качестве альтернативы, и в зависимости от ваших потребностей, использование другого API может быть самым простым решением. Я смог вернуть кошачий факт из "https://meowfacts.herokuapp.com/". Смотри ниже. 

const URL = "https://meowfacts.herokuapp.com/"


async function getCatFact() {
  const response = await fetch(URL)
  console.log(await response.json())
}


getCatFact()
...