OTCloud
@OTCloud
Программирование и Архитектура ПО

Как правильно сделать кросс-доменный запрос через fetch()?

Всем привет!

Есть задача получить файл по ссылке, используюя JavaScript. Пытаюсь получить файл через fetch(), пример ниже. Проблема в том, что при запросе файла по ссылке сторонний сервер возвращает ошибку:
Access to fetch at 'ссылка на сторонний сервис' (redirected from 'ссылка на файл') 
from origin 'домен с которого делается запрос' has been blocked by CORS policy: 
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.


И что самое интересное, так это то, что вызывая fetch() под своим поддоменом возникает ошибка, а у коллеги (под его поддоменом) все ОК. Ниже приложил список заголовков двух запросов, один мой, второй коллеги.
Надеюсь найдутся експерты, которые смогут объяснить почему "мой fetch" и "fetch моего коллеги" работают по разному.

Код для запроса:
fetch('поддомен.домен.ru/файл')
    .then(response => response.text())
    .then(data => console.log(data))


Заголовки запроса:

Мой запрос:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8,ja;q=0.7,pl;q=0.6,tr;q=0.5
Cache-Control: no-cache
Connection: keep-alive
DNT: 1
Host: other.host.com
Origin: https://sub1.domain.ru
Pragma: no-cache
Referer: https://sub1.domain.ru/
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.3


Запрос коллеги:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Cookie: bla-bla-bla-длинная-строка
Host: sub2.domain.ru
Pragma: no-cache
Referer: https://sub2.domain.ru/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36
  • Вопрос задан
  • 474 просмотра
Решения вопроса 2
@askhat
Сервер к которому вы осуществляете запрос, должен возвращать в ответе заголовок Access-Control-Allow-Origin в значении которого содержится URL приложения собственно выполняющего запрос

Например:
Access-Control-Allow-Origin: http://localhost:3000, https://example.com


https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Ответ написан
OTCloud
@OTCloud Автор вопроса
Программирование и Архитектура ПО
Добавлю к этому вопросу решение, к которому в итоге пришли.
Я изначально выбрал неправильный подход для скачивания файлов через JavaScript, поэтому все задачи с этим связанные перенес на бэк. Таким образом на бэк просто передаю ссылку на нужный файл и делаю запрос с бэка для скачивания. Авторизацию прохожу за счет добавления заголовка "Authorization: Bearer <api token from cookie>" в запросе.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы