Короче говоря, я ничего не поняла. API сбор данных, secret key, api key

Уже достаточно долго пытаюсь въехать в то, как брать данные с api. Конкретного вопроса нет, тут скорее я хочу попросить помощи разобраться с тем, как, что и зачем работает. Есть некая api, от которой у меня есть: точка входа, api key, private key, и то, откуда мне надо забирать данные. Задача: забрать данные и отобразить их.

Я сделала вот такой небольшой код:

async function test() {
let response = await fetch('точкавхода', {
  method: 'GET',
  mode: 'no-cors',
  headers: {
    'api key': 'private key',
    "Accept": "application/json",
    'Access-Control-Allow-Origin': '*',
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
    'Content-Type': 'application/json'    
  }
});
const data = await response.text();
return data;
}

test().then(data => console.log(data));

Сделала асинхронную функцию, т.к. хром ругался, что await не асинхронна, потом добавила "mode: no-cors" дабы система не ругалась (на политику конфиденциальности? не стала вдаваться в подробности).

Как выглядит сайт с апи. Есть страничка, куда мне надо вводить логин и пароль и собственно страница с выводом этой инфы (если кому интересно, там лежит json, но мне кажется на код это не должно в целом влиять, только на строку с типом контента).

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


Ответы (1 шт):

Автор решения: Ortophius

Политика CORS позволяет веб-серверу решать, на каких адресах можно отображать их содержимое. Это достигается с помощью заголовков Access-Control, которые указаны в вашем запросе, однако данные заголовки используются именно со стороны сервера. Например, с помощью заголовка:

Access-Control-Allow-Origin': '*'

Сервер указывает, что его содержимое можно встраивать на страницах на любых адресах. В запросе такие заголовки не имеют смысла и не влияют ни на что, поэтому вы можете их убрать из своего запроса.

Как правило, браузеры ограничивают кросс-доменные запросы, если политика CORS удалённого сервера не разрешает обратное. Для решения такой проблемы используют прокси: промежуточные веб-серверы, которые вместе с нужным контентом отдают также разрешающие заголовки CORS.

MDN документация по CORS

→ Ссылка