Cloudinary връща 401 неупълномощен при качване с помощта на jQuery

Първо, трябва да кажа, че документацията за приставката Cloudinary jQuery е ужасна. Трябва да има напълно работеща демонстрация, която да може да се проверява и копира/поставя от нея.

Опитвах се да внедря този плъгин през целия ден днес, но безуспешно. Всеки път, когато заявка бъде изпратена от уеб сървъра, получавам 401 неоторизиран отговор. Очевидно вече съм проверил двойно и тройно API ключа и той е правилен.

Моля, имайте предвид, че за целите на този въпрос съм обфускирал URL адреса на източника и ключовете за API по-долу...

Моята заявка:
Origin http://someurl
X-Requested-With XMLHttpRequest
User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.29.13 (KHTML, като Gecko) Версия/6.0.4 Safari/536.29.13
Content-Type multipart/form-data; boundary=----WebKitFormBoundaryiv0wUvjBAxsYJx1q
Приемане на приложение/json, текст/javascript, /; q=0.01
Референт http://someurl/cloudinary.html
multipart/form-data
Граница ----WebKitFormBoundaryiv0wUvjBAxsYJx1q
Размер 187B

А ето и отговора от cloudinary:

Състояние 401
Поддържане на връзката
Дължина на съдържанието 40
X-Request-Id ac82262506edc9fb37fd533383c3f650
X-UA-съвместим IE=Edge,chrome=1
Облачен сървър
Access-Control-Max-Age 1728000
Access-Control-Allow-Methods POST, GET, OPTIONS
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin http://someurl
Cache-Control no-cache

{"error":{"message":"Unknown 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>

person Eduardo J Garcia    schedule 05.05.2013    source източник
comment
Cloudinary docs определено оставят какво да се желае.   -  person Alexander Mills    schedule 19.02.2016


Отговори (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;}
person Tal Lev-Ami    schedule 06.05.2013