Empty response during asynchronous loading of Vkontakte video?

T

Taras Labiak2014-12-30 20:18:39

JavaScript

Taras Labiak, 2014-12-30 20:18:39

There is a simple form that indicates the name, descriptions and the video itself, which is loaded asynchronously on VKontakte

<?php
require 'private/config.php';
header('Access-Control-Allow-Origin: http://*.vk.com');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Video</title>
    <script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript"></script>
    <script type="text/javascript">
        var config = <?=json_encode($config) ?>;
        var vk_init = { apiId: config.vk.id };
        var form;
        addEventListener('load', function() {
            VK.init(vk_init);
            form = document.forms[0];
            form.addEventListener('submit', submit);
        });

        function submit(e) {
            e.preventDefault();
            var name = document.getElementsByName('name')[0].value;
            var description = document.getElementsByName('description')[0].value;
            var video_info = {
                gid: 45661650,
                name: name
            };
            if (description)
                video_info.description = description;
            VK.Api.call('video.save', video_info, vk_save);
            return false;
        }

        function vk_save(vk_data) {
            if (vk_data.error)
                console.log(vk_data.error);
            else {
                var data = new FormData(form);
                var ajax = new XMLHttpRequest();
                ajax.open('post', vk_data.response.upload_url);
                ajax.onloadend = function() {
                    console.log(ajax);
                };
                ajax.send(data);
            }
        }
    </script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
    <input type="text" name="name" placeholder="Назва" required />
    <input type="text" name="description" placeholder="Опис" />
    <input type="file" name="video_file" />
    <input type="submit" />
</form>
</body>
</html>

In response I get

besides this Chrome throws an error

XMLHttpRequest cannot load http://cs523100.vk.com/upload_video.php?act=add_vi... . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' highway ' is therefore not allowed access.

Even though the video loaded with a name and description,
Firefox didn't get it without a warning either.

Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

and responseType and responseText are empty as well

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

W

wol_fi, 2014-12-31
@wol_fi

If my memory serves me, then the vk api does not give the Access-Control-Allow-Origin header for cross-domain ajax (via XMLHttpRequest) requests (which is what chrome tells you about). Try using JSONP. For example:

<script src="https://api.vk.com/method.name&params=blabla&callback=myFunc"></script>
<script>
function myFunc(response){
console.log(response);
}
</script>