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

Question

使用角度。
要在 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;
    }
  }

我什至尝试指定 Access-Control-Allow-Methods，特别是 GET、POST、PATCH、PUT、DELETE、OPTIONS。

我还添加了

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

提前致谢！

标签： angularuploadvimeovimeo-api

Answer 1

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