Cloudinary 在使用 jQuery 上传时返回 401 未经授权答案

【问题标题】：Cloudinary returning 401 unauthorized on upload using jQueryCloudinary 在使用 jQuery 上传时返回 401 未经授权
【发布时间】：2013-04-29 12:34:18
【问题描述】：

首先，我必须说Cloudinary jQuery 插件的文档很糟糕。需要有一个可以检查和复制/粘贴的完整演示。

我今天整天都在尝试实现这个插件，但无济于事。每次网络服务器发送请求时，我都会收到 401 未经授权的响应。 显然我已经对 API 密钥进行了两次和三次检查，它是正确的。

请注意，出于这个问题的目的，我已经混淆了下面的源 URL 和 api 键...

我的要求：
起源 http://someurl
X-Requested-With XMLHttpRequest
用户代理 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.29.13 (KHTML, like Gecko) 版本/6.0.4 Safari/536.29.13
Content-Type multipart/form-data; 边界=----WebKitFormBoundaryiv0wUvjBAxsYJx1q
接受应用程序/json，文本/javascript，/； q=0.01
推荐人 http://someurl/cloudinary.html
多部分/表单数据
边界 ----WebKitFormBoundaryiv0wUvjBAxsYJx1q
尺寸 187B

以下是来自 cloudinary 的回复：

状态 401
连接保持活动
内容长度 40
X-Request-Id ac82262506edc9fb37fd533383c3f650
X-UA 兼容 IE=Edge,chrome=1
服务器云
访问控制最大年龄 1728000
访问控制允许方法 POST、GET、OPTIONS
内容类型应用程序/json；字符集=utf-8
访问控制允许来源http://someurl
Cache-Control no-cache

{"error":{"message":"Unknown API key "}}

我的 HTML 页面有以下内容

<html>
    <body>
    <input type="file" class="cloudinary-fileupload" data-cloudinary-field="image_upload" data-bind="attr:{'data-form-data':formData, name:tag}" data-form-data="%7B%22public_id%22%3A%221_overall%22%2C%22tags%22%3A%22overall%22%2C%22format%22%3A%22jpg%22%2C%22timestamp%22%3A%221367772489%22%2C%22callback%22%3A%22http%3A//someurl/cloudinary_cors.html%22%2C%22signature%22%3A%2205767fbf65bfff181c6ccc65b90a457a4a9189e0%22%2C%22api_key%22%3A%22some_api_key%22%7D" name="overall">
    <div class="preview"></div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/jquery-ui.min.js"></script>
    <script src="js/vendor/jquery.iframe-transport.js"></script>
    <script src="js/vendor/jquery.fileupload.js"></script>
    <script src="js/vendor/jquery.cloudinary.js"></script>
    <script type="text/javascript">
        $.cloudinary.config({"api_key":"some_api_key","cloud_name":"some_cloud_name"});
        $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {  $('.preview').html(
               $.cloudinary.image(data.result.public_id, 
                   { format: data.result.format, version: data.result.version, 
                     crop: 'scale', width: 200 }));    
               $('.image_public_id').val(data.result.public_id);    
          return true;
        });
    </script>   
    </body>
</html>

【问题讨论】：

Cloudinary 文档肯定有一些不足之处。

标签： jquery authentication file-upload cdn cloudinary

【解决方案1】：

data-form-data 属性需要进行 HTML 编码而不是 URL 编码，例如，您的示例中的 data-form-data 应该是：

{&quot;public_id&quot;:&quot;1_overall&quot;,&quot;tags&quot;:&quot;overall&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;timestamp&quot;:&quot;1367772489&quot;,&quot;callback&quot;:&quot;http://someurl/cloudinary_cors.html&quot;,&quot;signature&quot;:&quot;05767fbf65bfff181c6ccc65b90a457a4a9189e0&quot;,&quot;api_key&quot;:&quot;some_api_key&quot;}

【讨论】：