Question

首先，我必须说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，与Gecko一样）版本/ 6.0.4   Safari / 536.29.13
内容类型multipart / form-data;   boundary = ---- WebKitFormBoundaryiv0wUvjBAxsYJx1q
接受   application / json，text / javascript， / ; q = 0.01
参考   http://someurl/cloudinary.html
  多部分/格式数据
  边界---- WebKitFormBoundaryiv0wUvjBAxsYJx1q
  大小187B

以下是来自cloudinary的回复：

状态401
  连接保持活着
  内容长度40
  X-Request-Id ac82262506edc9fb37fd533383c3f650
  X-UA兼容IE =边缘，铬= 1
  服务器cloudinary
  Access-Control-Max-Age 1728000
  访问控制允许方法POST，GET，OPTIONS
  Content-Type application / json;字符集= UTF-8
  Access-Control-Allow-Origin http://someurl
  缓存控制无缓存

   {“error”：{“message”：“未知API密钥”}}

我的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>

Answer 1

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

{&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;}

使用jQuery上传的Cloudinary返回401未授权

1 个答案: