Заголовок «Access-Control-Allow-Origin» отсутствует в запрошенном ресурсе при получении API.

Иногда его всегда блокировали, если он не соответствовал политике запросов HTML.

Когда я извлекаю данные с помощью API, снова и снова происходит что-то не так. Вот как я быстро исправил это четырьмя способами.

исходное получение:

Когда сначала несколько раз выполняется, он работает и как-то выскакивает ошибка доступа.

Почему это происходит?

когда пользователь отправляет запрос в API, сервер чувствует себя небезопасно отправлять данные обратно клиенту, не прошедшие квалификацию. Источником должен быть доверенный сайт, который должен быть объявлен в заголовке.

Узнайте больше о Access-control-allow-origin.

Поэтому я пытаюсь использовать прокси, чтобы исправить это в первую очередь.

1. Первый популярный прокси — https://cors-anywhere.herokuapp.com/

А потом опять что-то не так. И ответ медленный с этим прокси.

GET https://cors-anywhere.herokuapp.com/https://randomuser.me/api/ 429 (Too Many Requests)

Это ошибка 429 слишком много запросов.

Похоже это проблема cors-anywhere.herokuapp.com

2.Затем я пытаюсь отказаться от него, чтобы попробовать другой https://api.allorigins.win/raw?url=

И это работает и быстрее, чем herokuapp.

Если вы хотите попробовать этот прокси здесь

3.Еще один способ — настроить режим выборки:

Когда вы просматриваете MDN об использовании выборки, понятно объяснить настройку.

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: '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': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

Ожидаемый заголовок CORS на узле:

res.setHeader('Access-Control-Allow-Origin', 'whatever.com:9000');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true); // you probably dont want this one unless there is auth/cookies involved
res.setHeader('Access-Control-Allow-Methods', 'GET,PATCH,POST,PUT,DELETE');

еще одна статья по теме в freecodecamp

4.Еще один способ Chrome:

в расширении Google есть варианты по этому поводу, такие как cross domain-cors и allow cors:access-control-allow-origin.

Просто добавив в Chrome, проще контролировать, какой сайт вы хотите разрешить.

А также можете создать собственный прокси, чтобы исправить это, но я просто пропущу это здесь.

Заголовок «Access-Control-Allow-Origin» отсутствует в запрошенном ресурсе при получении API.

Вопросы по теме