来自源的 Vimeo URL 已被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Methods 不允许方法 PATCH

问题描述

使用了Angular。
要在 vimeo 中上传视频，需要 3 个步骤
第 1 步。创建视频。
步骤 2. 上传视频文件。
第 3 步：验证上传。

创建视频工作正常，但上传视频文件会导致此错误。
我的创建代码是：

createVimeo(options,fileSize): Observable<any> {
    const initHeaders = new HttpHeaders(
      {
        'Authorization': 'Bearer ' + options.token,'Content-Type': 'application/json','Accept': 'application/vnd.vimeo.*+json;version=3.4',}
    );

    const initBody = {
      'upload': {
        'approach': 'post','size': fileSize
      },"privacy": {
        "embed": "private"       // public for public video
      },'name': options.videoName,'description': options.videoDescription
    };
    if (this.vimeoResult) {
      return new Observable<any>(observer => {
        observer.next(this.vimeoResult);
        observer.complete();
      });
    } else if (this.vimeoObsShare) {
      return this.vimeoObsShare;
    } else {
      return this.http.post(options.url,initBody,{ headers: initHeaders });
    }
  }

我的上传代码是

vimeoUpload(url,file: File): Observable<HttpEvent<any>> {
    console.log(url)
    const headers = new HttpHeaders({
      'Tus-Resumable': '1.0.0','Upload-Offset': '0','Content-Type': 'application/offset+octet-stream',"Accept"  :"application/vnd.vimeo.*+json;version=3.4",'Access-Control-Allow-Origin': '*',"Access-Control-Allow-Methods": "*"
    });
    const params = new HttpParams();
    const options = {
      params: params,reportProgress: true,headers: headers,};
    const req = new HttpRequest('PATCH',url,file,options);
    return this.http.request(req);
  }

这是我的组件代码

uploadVimeoVideo(files: FileList): void {
    this.uploadStatus = 1;
    if (files.length === 0) {
      console.log('No file selected!');
      return;
    }
    const file: File = files[0];
    const isAccepted = this.checkAllowedType(file.type);
    if (isAccepted) {
      this.uploadStatus = 1;
      const options = {
        token: "aXXXXXXXXXXXXXXXXX77",url: 'https://api.vimeo.com/me/videos',videoName: 'test',videoDescription: 'testdesc',};
      this.uploadControl.createVimeo(options,file.size)
        .pipe(
          map(data => this.data = data),switchMap(
            () => {
              console.log(this.data) //TILL THIS POINT IT WORKS FINE. THIS DATA GET PRINTED WITH THE LINK REQUIRED
              this.uploadControl.updateVimeoLink(this.data.link);
              if (this.data.upload.size === file.size) {
                return this.uploadControl.vimeoUpload(this.data.upload.upload_link,file);
              } else {
                this.uploadStatus = 4;
              }
            }
          )
        ).subscribe(
          event => {
            if (event.type === HttpEventType.UploadProgress) {
              this.uploadPercent = Math.round(100 * event.loaded / event.total);
              this.uploadStatus = 3;
            } else if (event instanceof HttpResponse) {
              this.uploadStatus = 5;
              setTimeout(() => {
                this.uploadStatus = 0;
              },5000);
            }
          },(error) => {
            console.log('Upload Error:',error);
            this.uploadStatus = 4;
          },() => {
            console.log('Upload done');
          }
        );
    } else {
      this.uploadStatus = 2;
    }
  }

我什至尝试过专门指定访问控制允许方法，例如 GET、POST、PATCH、PUT、DELETE、OPTIONS。

我还加了

我还应该改变什么才能使这一项工作？

提前致谢！

解决方法

您需要使用“tus”方法而不是“post”方法。