Доброго дня!
Погружаюсь в JS и работу с различными источниками через публичные API. Потратил много времени на поиски решения своей проблемы, но все решения расплывчатые, либо мне сложно понять. Поэтому большая просьба не отсылать к матчасти по политике CORS, так как я её уже читал, читал форум и прочие ответы в том числе на англ. яз. ресурсах (Например здесь: Why does my JavaScript code..., но тут было сложно понять что именно необходимо использовать для того что бы не сталкиваться с данной проблемой), форум с прямым вопросом остался последней инстанцией для того чтобы разобраться.
Оставлю вам вот такой массив на всякий случай = ['невнимательный', 'не разобрался', 'все просто', 'CORS', '...']
Сам вопрос.
Есть такой код. Довольно простой:
async function createCharts () {
let url = '';
let api = await fetch (url);
console.log (api);
...
};
url - точно публичное API (не нужен ключ, не нужна авторизация итд); спрашивал владельцев о том, что возможно есть какие-то ограничения итд - их нет;
Насколько я понимаю, этого достаточно для GET запроса. В console.log я ожидаю получить response где в дальнейшем я мог бы обратиться к телу ответа. Вместо этого я получаю ошибку политики CORS
Access to fetch at 'моя_url'ка' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
index.js:527 GET 'моя_url'ка' net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch
Если заглянуть в раздел Сеть -> Заголовки и посмотреть код статуса, стоит 200.
Запросить URL: моя_url'ка
Метод запроса: GET
Код статуса: 200
Правило для URL перехода: strict-origin-when-cross-origin
Если заглянуть в раздел Сеть -> Предварительный просмотр, то там ничего не будет кроме: "Не удалось загрузить данные";
Если следовать тому, что выводится в консоли и использовать mode: 'no-cors', то в консоли будет уже что-то похожее на то что я ожидал первоначально, за некоторыми "НО":
Response {type: 'opaque', url: '', redirected: false, status: 0, ok:false, …}
body: null
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""
[[Prototype]]: Response
Эти "но", это: "false", пустое тело, непонятный тип, отсутствует url, статус 0, никаких заголовков итд. Также если заглянуть в раздел Сеть -> Заголовки и посмотреть код статуса, стоит 200 (хотя в консоли 0). И если обратиться Сеть -> Предварительный просмотр: то там будет тот json который я хотел получить в виде ответа.
Код "модернизировал" также в что-то такое, но это также ни к чему не приводило:
let chartApi = await fetch (url, {
mode: 'no-cors',
}).then(response => {return response.json()});
Ошибка:
index.js:529 Uncaught (in promise)
SyntaxError: Unexpected end of input (at index.js:529:42)
Возможно, многое из того что я написал лишнее, но хотелось максимально дать информации.
Я использую VS Code и расширение Live Server, также пробовал загружать на тестовый домен timeweb, потому что думал что ошибка может быть из-за расширения, но все тоже самое.
Читал про расширение "Почтальон" для Chrome, его не использовал так как хочу понять и разобраться как это все работает без него.
Спасибо, что потратили время на прочтение и ваши ответы