Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как заполучить изображение с фотохостинга через fetch() ? (https://javascript.ru/forum/misc/78139-kak-zapoluchit-izobrazhenie-s-fotokhostinga-cherez-fetch.html)

Teamur 31.07.2019 20:26

Как заполучить изображение с фотохостинга через fetch() ?
 
Вот ссылка на картинку:
https://cdn1.savepice.ru/uploads/201...7bd08-full.jpg

Если указать её в src <img> всё отлично, но
если через JS:
fetch('https://cdn1.savepice.ru/uploads/2019/7/31/62d20b4eb0c7f38d8355a0858757bd08-full.jpg')
.then(res=>res.blob())
.then(blob=>{
let img=document.createElement('img');
img.src=URL.createObjectURL(blob);
document.body.append(img)
})

то не работает, а в консоли выдаёт:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn1.savepice.ru/uploads/201...7bd08-full.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: NetworkError when attempting to fetch resource.

Почему же при указании в src я могу заполучить ресурс, а при fetch() нет?

Malleys 31.07.2019 23:57

Цитата:

Сообщение от Teamur
Почему же при указании в src я могу заполучить ресурс, а при fetch() нет?

Так вон же в консоли выдаёт:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn1.savepice.ru/uploads/201...7bd08-full.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Aetae 01.08.2019 00:10

Безопасность - незя грузить ничего чужого напрямую. Когда ты используешь img, script, link и пр. ты также не имешь никакого доступа к тому что там загрузилось. Т.о. ты никак не можешь спереть инфу не предназначенную для тебя, пользователь может увидеть - а ты нет.

Malleys 01.08.2019 00:12

Цитата:

Сообщение от Aetae
ты никак не можешь спереть инфу не предназначенную для тебя, пользователь может увидеть - а ты нет.

А если использовать CORS Proxy?

рони 01.08.2019 00:22

Цитата:

Сообщение от Malleys
А если использовать CORS Proxy?

ссылки с примерами
https://javascript.ru/forum/misc/764...tml#post501902
https://javascript.ru/forum/misc/714...odom-cors.html
https://javascript.ru/forum/misc/767...tml#post503550
https://javascript.ru/forum/events/7...tml#post508197

Teamur 01.08.2019 07:59

Спасибо )) Я предполагал, что туплю ))

Просто необычно, при <img src='...'> хостинг отвечает, файл отсылается и я вижу картинку.

Потом возникла мысль: Отлично, а запрошу-ка его через fetch, а потом, например, дам возможность пользователю сохранить файл у себя на компе в IndexedDB.

С изображениями, наверное, можно через canvas сделать слепок, но это уже трюки ))

Интересно при <img src='..'> - Что же там браузер прописывает в запросе, чего нет в fetch ?
Ведь это тоже GET-запрос

Alexandroppolus 01.08.2019 09:42

Цитата:

Сообщение от Teamur
С изображениями, наверное, можно через canvas сделать слепок, но это уже трюки ))

Нет, в данном случае нельзя.
Цитата:

Сообщение от Teamur
Интересно при <img src='..'> - Что же там браузер прописывает в запросе, чего нет в fetch ?
Ведь это тоже GET-запрос

Тут важнее, что сервер приписывает в ответе )
https://learn.javascript.ru/xhr-crossdomain

Браузер не позволяет получить в скрипте какое-либо содержимое с другого домена, если тот сервер не даст специальное разрешение. Потому ни xhr, ни канва, ни ифрейм никуда не пропустят. Даже в таблицу стилей нельзя программно заглянуть.

Teamur 01.08.2019 10:33

Alexandroppolus,
теперь всё понятно )
Всем спасибо за ответы!


Часовой пояс GMT +3, время: 18:57.