Vimeo URL from origin has been blocked by CORS policy: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response

Angular is used.
To upload a video in vimeo it takes 3 steps
Step 1. Create the video.
Step 2. Upload the video file.
Step 3. Verify the upload.

Creating a video is working perfectly but uploading the video file causes this error.
My code for creating is :

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 });
    }
  }

My code for upload is

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);
  }

This is my component code

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;
    }
  }

I even tried specifying Access-Control-Allow-Methods specifically like GET, POST, PATCH, PUT, DELETE, OPTIONS.

I also added

What more should I change to make this one work?

Thanks in advance!

Solution

You need to use the 'tus' approach rather than the 'post' approach.