Как мне получить внешнее изображение и закодировать его в base64 на клиентском WebApp?

Question

Вот текущий код:

toBase64(url, callback, outputFormat){
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
    canvas = null; 
  };
  img.src = url;
}

Я не могу найти путь через ошибку CORS для извлечения внешнего изображения.
Кроме того, я использую рентгеновский снимок на своем сервере NodeJS, и он может получать те же изображения. Я предполагаю, что это означает, что на клиентской стороне также возможно пройти через ошибку CORS.

Answer 1

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

Тем не менее, существует ряд известных способов обойти CORS, например, используя более либеральные ограничения на запросы, сделанные тегами сценариев. Однако почти все они включают только запросы GET, поэтому вам может не повезти.

Мой совет - использовать ваш сервер в качестве прокси-сервера. Создайте специальные конечные точки, куда вы будете направлять запросы и ответы через свой собственный сервер, и вы будете в основном избегать CORS. Это увеличивает нагрузку на ваш сервер, но я делал это раньше, и это работало довольно хорошо.