Vimeo CORS问题

Question

我正试图通过Ajax将视频上传到Vimeo，但我在Firefox上遇到了CORS问题。

这是我正在使用的代码。只有在发布文件的最后阶段，才会保护CORS，防止上传。

我已经检查了标题和交叉原产地设置正确。

$.ajax({
  url:'https://api.vimeo.com/me',
  crossDomain:true,
  headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
  error:function(){
          videoError('Couldn\'t get a quota');
  },
  success:function(uploadQuota){
        if(uploadQuota.upload_quota.space.free > 0 && (uploadQuota.upload_quota.quota.sd == true || uploadQuota.upload_quota.quota.hd == true)){

        //Get Upload Ticket
        $.ajax({
          url:'https://api.vimeo.com/me/videos',
          data:{type:'POST'},
          type:'POST',
          dataType:'json',
          crossDomain:true,
          headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
          error:function(){
                  videoError('Couldn\'t get a ticket');
          },
          success:function(uploadTicket){
            if(uploadTicket.ticket_id != ''){
                //Upload File
                var videoData = new FormData();
                $.each($('#video_upload')[0].files, function(i, file) {
                        videoData.append('file_data', file);
                });

                $.ajax({
                        url:uploadTicket.upload_link_secure,
                        type:'POST',
                        headers:{Authorization: 'bearer ',Accept:'application/vnd.vimeo.*+json;version=3.2'},
                        data: videoData,

                        cache: false,
                        contentType: 'multipart/form-data',
                        processData: false,
                        crossDomain:true,
                        //dataType:'jsonp',
                        error:function(){
                                videoError('Error uploading video. Please contact FDN with the ticket id:'+uploadTicket.ticket_id);
                        },
                        success:function(uploadData,status){
                                //Copy id to text box
                        }
                    });
            } else {
                    //If none, process error
            }
        }
    });
  } else {
              //If none, process error
      }
  }                                                                                                                                                                                         
});

有什么明显的事情我错过了或者可以尝试吗？

Answer 1

简短回答： Vimeo 上传不是为客户端JavaScript设计的。上传系统 100%支持CORS。

长答案：

Vimeo帖子上传是为了提供难以置信的轻松上传体验而开发的。我们给你一张表格。将表单放在页面的html中，用户使用表单，一切都设置好了。这不支持进度条。这是不能恢复的。

在上传视频时，我们必须在视频发布之前执行一些后处理.当前的POST上载系统通过在上传完成后重定向客户端来自动处理这一问题。不幸的是，CORS和重定向存在一些问题(我很难找到细节，但是如果我还记得规范状态作为错误案例处理某些重定向的话)。

现在你必须自己完成上传。我们正在努力改进这一点，但就目前而言，您必须从您的帖子中找到回复的“位置”标题中的url。向这个网址发出一个GET请求，你的上传就完成了。

Vimeo PUT上传被设计为功能齐全的高级上传系统。它们是可恢复的，流设计很容易支持进度条。您可以查询上传的状态，并启动和停止命令中的所有内容。CORS 100%支持。这将需要使用HTML5文件对象，该对象对IE9和更低版本的支持有限。

编辑，现在有一个非官方的客户端视频上传脚本流工作流程。你可以在这里找到它：https://github.com/websemantics/vimeo-upload

Answer 2

正如@Dashron所提到的，“简单的HTTP上传”应该用于简单的情况。例如，如果您想继续上传，您应该使用"Resumable上载“。

但是，几乎所有关于类似问题的引用都缺少两条信息，我想与大家分享一下.。

1)使用vimeo-上载时要小心

正如@PaulLoomijman在给@Dashron的评论中提到的那样，vimeo-upload (github.com/web语义/vimeo-upload)要求您公开令牌，出于安全原因，这是不太好的。

实际上，我在存储库中留下了一个建议，即如果我们能够与vimeo的upload_url一起使用它，那么它仍然非常有用，因为这样我们就不必公开令牌了。

2)您可以使用POST上载方法检查上载进度

如果像我一样，您只想向用户报告上传进度，同时使用简化的“简单HTTP上载”过程，您实际上可以不使用PUT方法这样做。

即使没有明确的文档，当使用“简单的HTTP上载”时，在初始响应(https://developer.vimeo.com/api/upload/videos#generate-an-upload-ticket)中也有一个“https://developer.vimeo.com/api/upload/videos#generate-an-upload-ticket”，您可以像使用"Resumable上载“一样使用它来检查上传进度。

因此，即使在使用“简单HTTP上载”时，也可以遵循"Resumable上载“中有关”验证上载“的信息(此处：https://developer.vimeo.com/api/upload/videos#verify-the-upload)。这里描述的简历功能可能不起作用，但您可以检查上载进度，并在上传过程中向用户显示。实际上，我实现它是为了在我的webapp应用程序中显示一个进度条。

我希望这对某些人有所帮助，因为由于每个上传方法的局限性/复杂性，我在这两种上传方法之间来回往返。