Vimeo CORS 问题

Posted 2023-05-08

【中文标题】Vimeo CORS 问题

【英文标题】：Vimeo CORS Issue

【发布时间】：2021-12-30 07:47:51

【问题描述】：

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

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

【参考方案1】：

简短回答： Vimeo POST uploads 不是为客户端 javascript 设计的。 PUT upload system 100% 支持 CORS。

长答案：

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

上传视频时，我们必须在视频可用之前进行一些后期处理。当前的 POST 上传系统通过在上传完成后重定向客户端来自动处理这个问题。不幸的是，CORS 和重定向存在一些问题（我很难找到详细信息，但如果我没记错的话，规范声明将某些重定向作为错误情况处理）。

现在您必须自己完成上传。我们正在努力改进这一点，但目前您必须在 POST 响应的“位置”标头中找到 URL。向该网址发出 GET 请求，您的上传就完成了。

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

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

【讨论】：

好的，我将尝试使用 PUT 方法，看看它对我有什么好处。

我尝试了 PUT 方法，但它仍然会生成 CORS 错误或 Firefox。

您是否有更多关于哪个 URL 产生错误的详细信息？

对于在使用 Vimeo API 时发现这篇文章的任何人，请注意，这里有一个第三方客户端 PUT 上传器：github.com/websemantics/vimeo-upload，它被用于许多网站。它与 cors 一起成功！

请注意，Dashron 提到的第三方客户端 PUT 上传器要求您将访问令牌放入客户端脚本中。访问令牌是敏感信息，例如密码，因此您永远不应将它们放在客户端上。我向 Vimeo 询问了一种使用 Ajax 上传的安全方式，他们的回复在这里：vimeo.com/forums/api/topic:280469

【参考方案2】：

正如@Dashron 提到的，“简单的 HTTP POST 上传”应该用于简单的情况。例如，如果您想恢复上传，您应该使用“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）。那里描述的恢复功能可能不起作用，但您可以检查上传进度并在上传时将其显示给用户。我实际上实现了它以在我的 web 应用程序中显示进度条。

我希望这对某人有所帮助，因为由于每种方法都存在限制/复杂性，我在两种上传方法之间来回切换。