Vimeo跨域资源共享问题

Question

Vimeo跨域资源共享问题

5

我正在尝试通过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
      }
  }                                                                                                                                                                                         
});

我有没有错过什么明显的东西可以尝试？

- tl8

2个回答

2

如@Dashron所提到的，“简单HTTP POST上传”应用于简单情况。例如，如果您想恢复上传，则应使用“可恢复的HTTP PUT上传”。

但是，几乎所有类似问题的参考资料都缺少两个信息，我想分享一下。

1）使用vimeo-upload时要小心

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

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

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

如果像我一样，您只想在使用“简单HTTP POST上传”的简化上传过程时向用户报告上传进度，那么您实际上可以在不使用PUT方法的情况下做到这一点。

尽管没有明确记录，但使用“简单的HTTP POST上传”时，您在初始响应中也有一个“upload_link_secure”（https://developer.vimeo.com/api/upload/videos#generate-an-upload-ticket），您可以像使用“可恢复的HTTP PUT上传”一样使用它来检查上传进度。因此，即使使用“简单的HTTP POST上传”，您也可以按照“可恢复的HTTP PUT上传”上的“验证上传”的信息进行操作（这里：https://developer.vimeo.com/api/upload/videos#verify-the-upload）。可能那里描述的恢复功能不起作用，但您可以检查上传进度并在上传过程中向用户显示它。我实际上已经在我的Web应用程序中实现了它以显示进度条。希望这能帮助到某些人，因为我在两种上传方法之间来回反复，由于每种方法都具有的限制/复杂性。

- Gonçalo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dashron · Accepted Answer

简短回答： Vimeo POST上传不支持客户端JavaScript，PUT上传系统 100%支持CORS。

详细回答：

Vimeo POST上传是为了提供一个非常简单的上传体验而开发的。我们提供一个表单，你把表单放在页面的HTML中，用户使用表单，一切都设置好了。这种方式不支持进度条，也不支持断点续传。

当上传视频时，我们必须执行一些后处理操作才能使视频可用。目前的POST上传系统会自动处理此过程，即在上传完成后重定向客户端。不幸的是，CORS和重定向存在一些问题（我有些难以找到细节，但如果我没记错的话，规范指定将某些重定向视为错误情况）。

现在你必须自己完成上传。我们正在努力改进这个问题，但现在你必须在POST响应的“location”头中找到URL。发送一个GET请求到该URL，你的上传就完成了。

Vimeo PUT上传被设计为功能完备的高级上传系统。它们支持断点续传，流式设计轻松支持进度条。你可以查询上传的状态，并在命令下启动和停止所有操作。CORS得到100%的支持。这将需要使用HTML5文件对象，但该对象在IE 9及以下版本中仅有有限的支持。

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