Как исправить ошибку CORS, используя подход «tus» при загрузке видео в Vimeo из компонента Angular - PullRequest
Новая
       14

Как исправить ошибку CORS, используя подход «tus» при загрузке видео в Vimeo из компонента Angular

0 голосов
/ 17 октября 2019

Я пытаюсь реализовать компонент Upload в Angular, используя подход 'tus', указанный в документации vimeo API

В соответствии с рабочим процессом vimeo, первый шаг - это создатьвидео, выполняющее запрос POST для получения «URL загрузки» для загрузки видео в другом запросе.

При попытке выполнить первый шаг я получаю сообщение об ошибке CORS.

Iиметь доступ к учетной записи Vimeo с токеном доступа, позволяющим загружать видео. Я попробовал это решение , но потерпел неудачу из-за той же ошибки CORS, и скрипт vimeo-upload от websemantic возвращает неверную ошибку запроса от vimeo.

Мой текущий код вСлужба Angular, пытающаяся получить ссылку для загрузки из vimeo, выглядит следующим образом:

служба загрузки: 

import { Observable } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';

export class UploadService {
    private api = 'https://api.vimeo.com/me/videos';
    private accessToken = '{my access token}';

    constructor( private http: HttpClient ) { }

    createVideo( file: File ): Observable<any> {
        const body = {
            name: file.name,
            upload: {
                approach: 'tus',
                size: '' + file.size
            }
        };
        console.log('request upload link for:', body);
        const header: HttpHeaders = new HttpHeaders()
            .set( 'Authorization', 'bearer ' + this.accessToken )
            .set( 'Content-Type', 'application/json' )
            .set( 'Accept', 'application/vnd.vimeo.*+json;version=3.4' );
        return this.http.post( this.api, body, {
            headers: header,
            observe: 'response'
        } );
    }
}

В моем компоненте я просто вызываю метод createVideo () из службы с файломиз ввода type = "files"

После выбора файла и вызова createVideo я получаю следующее:

console.log из службы: 

request upload link for:
{
  name: "movie_90.mp4"
  upload: {
    approach: "tus",
    size: "532571"
  }
}

иошибка CORS: 

Access to XMLHttpRequest at 'https://api.vimeo.com/me/videos' from <br/>origin 'http://localhost:8080' has been blocked by CORS policy: <br/>Request header field x-requested-with is not allowed by <br/>Access-Control-Allow-Headers in preflight response.

РЕДАКТИРОВАТЬ: Нашел ветвь vimeo-upload-js websemantic, которая работает с текущей версией API vimeo: https://github.com/Mochaka/vimeo-upload-js

Протестировано локально и работает, только янеобходимо интегрировать простой Javascript в компонент Angular.

...