Question

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

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

我检查了标题并正确设置了Cross Origin。

$.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 POST uploads不适用于客户端JavaScript。 PUT upload system对CORS有100％的支持。

长答案：

Vimeo POST上传的开发旨在提供极其简单的上传体验。我们给你一个表格。您将表单放在页面的html中，用户使用表单，一切都已设置。这不支持进度条。这是不可恢复的。

上传视频时，我们必须在视频可用之前执行一些后期处理。当前的POST上传系统通过在上载完成后重定向客户端来自动处理此问题。不幸的是，CORS和重定向存在一些问题（我无法找到详细信息，但如果我记得正确的规则说明处理某些重定向作为错误情况）。

现在您必须自己完成上传。我们正在努力改进这一点，但目前你必须在POST的响应的“location”标题中找到url。向此网址发出GET请求，您的上传工作即告完成。

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

[编辑]现在有一个非官方的客户端视频上传脚本，用于流式工作流程。您可以在此处找到它：https://github.com/websemantics/vimeo-upload

Answer 2

正如@Dashron所提到的，“Simple HTTP POST upload”应该用于简单的情况。例如，如果要恢复上传，则应使用“Resumable HTTP PUT uploads”。

但是，几乎所有我想分享的类似问题的引用都缺少两条信息。

1）使用vimeo-upload时要小心

正如@PaulLoomijmans在对@Dashron的评论中所提到的，vimeo-upload（github.com/websemantics/vimeo-upload）要求您公开您的令牌，这不利于安全原因。

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

2）您可以使用POST上传方法检查上传进度

如果像我一样，您只是希望能够在使用“简单HTTP POST上传”的简化上传过程时向用户报告上传进度，您实际上可以在没有PUT方法的情况下这样做。

即使没有明确记录，当使用“简单HTTP POST上传”时，您在初始响应（https://developer.vimeo.com/api/upload/videos#generate-an-upload-ticket）中也有“upload_link_secure”，您可以像使用“可恢复的HTTP”一样使用它PUT上传“检查您的上传进度。

因此，即使使用“简单HTTP POST上传”，您也可以按照“可恢复HTTP PUT上传”（此处：https://developer.vimeo.com/api/upload/videos#verify-the-upload）中的“验证上传”信息进行操作。可能这里描述的恢复功能不起作用，但您可以检查上传进度并在上传过程中将其显示给用户。我实际上实现了它以在我的webapp中显示进度条。

我希望这可以帮助某人，因为我在两种上传方法之间来回走动，因为每种方法都有限制/复杂性。

Vimeo CORS问题

2 个答案: