Загрузка файла на Яндекс Диск REST API?

Question

[Denis_Lebedinsky]

Чтобы загрузить файл на Диск, необходимо:

Запросить URL для загрузки.
Загрузить файл по полученному адресу.

https://tech.yandex.ru/disk/api/reference/upload-d...

Я получаю адрес и делаю такой запро:

axios.put(url,
        {
           headers: {
           'Accept': '*/*',
           'Content-Type': 'application/x-www-form-urlencoded',
           'Expect': '100-continue',
           'Content-Length': size
        },
        data: file
    })
        .then(res => res.status)
        .catch(error => {
            throw error
        });

Как бы я не эксперементировал с заголовками, получаю вот такую ошибку CORS

Access to XMLHttpRequest at 'https://uploader38o.disk.yandex.net/upload-target/...' from origin 'localhost:3000' has been blocked by CORS policy: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

В документации нет примера, лишь ссылка.
Как правильно составить запрос.?

Comments

[dollar]

Ему не нравится Authorization в ваших заголовках. Уберите его из заголовков запроса.

И я не уверен, что можно записывать файлы на диск с веб-страницы, как-то это не очень безопасно выглядит. Если так будет можно, то любой сайт сможет воспользоваться моими куками и записать на мой диск что угодно.

[Denis_Lebedinsky]

dollar, из заголовков по умолчанию убрал авторизацию, и ошибка не появляется, файл создается но с неверными данными.

[Denis_Lebedinsky]

Я читаю файл с помощью FileReader из inputa, затем результат отправляю, теперь все сохраняется но данные сохраннего текстового файла выглядят так

{"headers":{"Content-Type":"application/json"},"file":"data:text/plain;base64,8uXx8iDy5fHyIPLl8fI="}

хотя там было написано "тест тест тест"

[dollar]

"тест тест тест" совсем не похоже на "application/json"

Answer 1

[Denis_Lebedinsky]

Проблема решена, я передавал base64, а нужно передавать blob
вот функция запроса и преобразования в blob. file - это данные из Filereader (reader.result)

export const upload_file_api = (url, file) => {
    const parts = file.split(',');
    const typep = parts[0];
    const base64Data = parts[1];
    const type = typep.split(';')[0].split(':')[1];
    const blobfile = b64toBlob(base64Data, type);

    delete axios.defaults.headers.common['Authorization'];
    axios.defaults.headers.common['Content-Type'] = 'application/octet-stream';
    return axios.put(url, blobfile)
        .then(res => res.status)
        .catch(error => {
            throw error
        });
};

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}