Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2019, 20:26
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

Как заполучить изображение с фотохостинга через 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() нет?
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2019, 23:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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).
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2019, 00:10
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Безопасность - незя грузить ничего чужого напрямую. Когда ты используешь img, script, link и пр. ты также не имешь никакого доступа к тому что там загрузилось. Т.о. ты никак не можешь спереть инфу не предназначенную для тебя, пользователь может увидеть - а ты нет.
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2019, 00:12
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Aetae
ты никак не можешь спереть инфу не предназначенную для тебя, пользователь может увидеть - а ты нет.
А если использовать CORS Proxy?
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2019, 00:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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
Ответить с цитированием
  #6 (permalink)  
Старый 01.08.2019, 07:59
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

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

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

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

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

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

Последний раз редактировалось Teamur, 01.08.2019 в 08:29.
Ответить с цитированием
  #7 (permalink)  
Старый 01.08.2019, 09:42
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

Сообщение от Teamur
С изображениями, наверное, можно через canvas сделать слепок, но это уже трюки ))
Нет, в данном случае нельзя.
Сообщение от Teamur
Интересно при <img src='..'> - Что же там браузер прописывает в запросе, чего нет в fetch ?
Ведь это тоже GET-запрос
Тут важнее, что сервер приписывает в ответе )
https://learn.javascript.ru/xhr-crossdomain

Браузер не позволяет получить в скрипте какое-либо содержимое с другого домена, если тот сервер не даст специальное разрешение. Потому ни xhr, ни канва, ни ифрейм никуда не пропустят. Даже в таблицу стилей нельзя программно заглянуть.
Ответить с цитированием
  #8 (permalink)  
Старый 01.08.2019, 10:33
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать печать стороннего HTML файла через js/jquery. Defrazo Общие вопросы Javascript 1 22.03.2017 23:50
Как сделать рендомный выбор и таймер через JSON API для CHATFUEL Satmax Общие вопросы Javascript 0 22.03.2017 21:32
как передать php массивы через ajax Evsik AJAX и COMET 11 11.07.2015 06:32
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как посмотреть что было добавлено через javascript Telnet Internet Explorer 2 26.03.2013 22:07