Как загрузить фотографию на сервер ВК прямо из браузера с запущенным iFrame-приложением?

Question

[evilandfox]

Набросал код на ES2015 с использованием VK api и браузерным fetch api для простоты. Код пытается загрузить тестовую фотку на стенку пользователя.
Конечно же, при запуске в консоли высветилась ошибка о том, что сервер не выдал в ответе заголовок Access-Control-Origin и все такое (имя моего хоста изменено):

Fetch API cannot load http://cs622616.vk.com/upload.php?act=do_add&mid=12345&aid=-14&gid=0&ha…70853&rhash=bf7ffe3ac92c408a14accbc12cc74bc0&swfupload=1&api=1&wallphoto=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://test.ru' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Если добавить в настройки запроса fetch свойство {mode: 'no-cors'} то приходит пустой ответ.
Есть какие-либо соображения? Вот код

VK.api('photos.getWallUploadServer', {}, uploadServer => {
    fetch('testimage.jpg')
      .then(response => response.blob())
      .then((img) => {
        var formData = new FormData();
        formData.append('photo', img);
        fetch(uploadServer.response.upload_url, {
          method: 'POST',
          headers: new Headers({
            'Content-Type': 'multipart/form-data'
          }),
          body: formData
        })
        .then(response => response.json())
        .then(metaJson => {
          VK.api('photos.saveWallPhoto', metaJson, saveWall => {
            const photo = `photo${saveWall.owner_id}_${saveWall.id}`;
            VK.api('wall.post', {attachments: photo}, wallPost => {
              if (!wallPost.error)
                console.log('Успех!');
              else
                console.log('Ошибка:', wallPost.error);
            });
          });
        })
        .catch(err => { console.log('Ошибка:', err); })
      });
  });

И да, для чего делается. Имеется приложение ВК, которое постит картинку-результат на стенку пользователя. Картинка легко генерируется в blob png средствами одной js-библиотеки перевода html в svg и затем в png. Ну а дальше было бы просто здорово загрузить эту картинку сразу с браузера на сервер ВК, попутно не расходуя трафик и ресурсы сервера итд.

Comments

[Pianist]

А можно поподробнее как именно картинку прикрепляете здесь?:
formData.append('photo', img);

[Pianist]

что делает fetch('testimage.jpg') ? откуда этот файл выбирается ?

[evilandfox]

Pianist: fetch как бы делает запрос и возвращает Promise https://learn.javascript.ru/fetch. Здесь он используется для для загрузки бинарных данных изображения.
а FormData - это типа submit формы сразу в JS (https://learn.javascript.ru/xhr-forms#formdata), где конечно же есть проблема кроссдоменной отправки

Answer 1

[Александр]

vk.com/dev/upload_files

Comments

[evilandfox]

Там написано только про то как загружать фото с использованием сервера

Answer 2

[Pianist]

На ангуляре вот так делаю запрос, кроссдоменно:

var token = '<ACCESS_TOKEN>';
var getVideos = function(){
                var params = {
                    extended: 1,
                    v: 5.45,
                    access_token: token,
                    videos: ['12312332_3232323,33242424244_5141424']
                    callback: "JSON_CALLBACK",
                };
                return $http.jsonp('https://api.vk.com/method/video.get', {
                    params: params
                });
}

//Run
getVideos().then(function(videoResponse){
   //Here video response
   console.log(videoResponse):
});

Comments

[evilandfox]

Это доступ к VK api, к нему можно легко обращаться из браузерного javascript. Тем более есть VK Javascript SDK, с которой этот пример упрощается до нескольких строк. Загрузка фоток в ВК более делается более мудрено