为什么 redirect_url 参数在我的 Vimeo ajax POST 上不起作用？答案

【问题标题】：Why doesn't the redirect_url parm work on my Vimeo ajax POST?为什么 redirect_url 参数在我的 Vimeo ajax POST 上不起作用？
【发布时间】：2021-03-20 05:21:15
【问题描述】：

我在使用 Vimeo 上传 API 将视频从我们的网页上传到 Vimeo 时遇到了问题，即使我已将正确的“接受”标头设置为 Vimeo 的 API 页面上指定的 3.4 版。任何人都可以建议为什么 redirect_url 参数不起作用？其他一切正常并且视频已上传，但不会发生重定向。这是我的完整页面：

<!doctype html>
<html>
<head>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="/include/jquerymmenu/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="application/javascript">
$.ajax({
        type: 'POST',
        url: 'https://api.vimeo.com/me/videos',
        upload: {
                approach: "post",
                redirect_url: 'https://www.example.com'
            },
        headers: {
             'Authorization': 'bearer ' + '<<my token here>>',
             'Content-Type': 'application/json',
             'Accept': 'application/vnd.vimeo.*+json;version=3.4'
           },
        
        success: function(res){
            console.log(res);
            // Write the form to the page
            $("div#myform").html(res.upload.form);
        },
        error: function(err){
            console.log(err);
        }
    });
</script>

<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="myform"></div>
</body>
</html>

【问题讨论】：

当您说“不发生重定向”时，究竟发生了什么？您是否被带到另一个页面，页面是否重新加载，您是否遇到错误消息或其他？
上传完成后，用户会被带到默认的 Vimeo“上传完成”页面，这是根据 Vimeo 文档设计的。

标签： javascript ajax upload vimeo-api

【解决方案1】：

在费了很多力气之后，我想出了一个解决方法来解决不支持 redirect_url 参数的 Vimeo POST 错误（他们的技术支持人员承认这是当前的错误）。

下面是完整的工作 php 页面。与 vimeo 示例不同，它实际上是 COMMENTED 和 COMPLETE！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow" />

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="/include/jquerymmenu/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="application/javascript">
//*************************************************************
// UPLOAD A VIDEO TO YOUR VIMEO ACCOUNT DIRECTLY FROM A WEB PAGE
// INCLUDING THE USE OF A REDIRECT_URL
//
// This is a hack of the Vimeo POST method of sending a video to Vimeo 
// since the Vimeo POST method has a bug which does not support the 
// redirect_url parameter.
//
// This page is completely self-contained. It makes an initial call
// to Vimeo in order to initialize the upload and displays the form
// returned from the initial call to the user, enabling them to 
// select their video and upload it. Following successful upload, 
// the user is redirected to the page they designate in sRedirectURL below
// along with any additional querystring parameters they wish to pass along
// to the target page (sAdditionalQuerystringParms).
//
//*************************************************************
// Define the redirect URL including the http or https prefix. such as https://example.com or http://example.com/folder/page.ext
var sRedirectURL = encodeURI('https://example.com');
// Define any additional querystring parameters STARTING WITH '&' (don't start with the usual '?')
// If there are no additional querystring parms, just set sAdditionalQuerystringParms = urlencode('');
// NOTE: We need to use the PHP urlencode instead of javascript encodeURI since javascript's encodeURI converts the 
// '&' to &amp; whereas the PHP urlencode converts '&' to the needed '%26'
var sAdditionalQuerystringParms = "<?php echo urlencode('&mytest=1');?>";

// Make the initial call to Vimeo which upon "success" will return a 'res' object containing the upload.form contents we need to display 
// the upload form to the user.
$.ajax({
        method: 'POST',
        url: 'https://api.vimeo.com/me/videos',
        upload: { 
            approach: "post"
           },
        headers: {
             'Authorization': 'bearer ' + '<<YOUR ACCESS TOKEN HERE>>',
             'Content-Type': 'application/json',
             'Accept': 'application/vnd.vimeo.*+json;version=3.4'
           },
        
        // Initial Vimeo call successful, now display the actual upload form to the user.
        success: function(res){
            console.log(res);
            // Write the form to the page
            $("div#myform").html(res.upload.form);
            
            // search the form's action= value and replace vimeo.com%2Fupload%2Fapi with the actual sRedirectURL 
            
            // fetch the current action
            var sAction = $("div#myform > form").attr("action");
            // search and replace the current redirect_url which VIMEO sets to itself, with our own redirect url
            var sNewAction = sAction.replace('https%3A%2F%2Fvimeo.com%2Fupload%2Fapi', sRedirectURL);
            // append any additional querystring parameters we wish to send to our redirect url besides the ones sent to our 
            // redirect from vimeo
            $("div#myform > form").attr("action",sNewAction + sAdditionalQuerystringParms);
            
            // At this point, the form is being displayed on the page and it's up to the user to select their video and press SUBMIT
            // to send their video to Vimeo.
        },
        error: function(err){
            console.log(err);
        }
    });
</script>

<title>Test Vimeo Upload</title>
</head>
<body>
<div id="myform"></div>
</body>
</html>

【讨论】：

【解决方案2】：

非常感谢您提供此解决方法。有点怀疑这个大错误在几个月后仍未修复。我遇到了我的名称字段没有保存为视频标题的问题，我想知道它是否与 redirect_url 的问题类似。

【讨论】：

这可能应该是对“解决方法”答案的评论，而不是它自己的答案。它没有提供自己的解决方法或解决方案，而且还提出了另一个问题
显然是这样的。