4

まず第一に、Cloudinary jQuery プラグインのドキュメントはひどいと言わざるを得ません。検査してコピー/貼り付けできる、完全に機能するデモが必要です。

私は今日一日中このプラグインを実装しようとしてきましたが、役に立ちませんでした。Web サーバーからリクエストが送信されるたびに、401 の無許可の応答が返されます。明らかに、私はすでに API キーを 2 回、3 回チェックしましたが、正しいです。

この質問の目的のために、以下のソース 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 (Gecko のような KHTML) Version/6.0.4 Safari/536.29.13
Content-Type multipart /フォームデータ; 境界=----WebKitFormBoundaryiv0wUvjBAxsYJx1q
application/json、text/javascript、/を受け入れます。q=0.01
Referer http://someurl/cloudinary.html
multipart/form-data
Boundary ----WebKitFormBoundaryiv0wUvjBAxsYJx1q
サイズ 187B

そして、これが cloudinary からの応答です。

Status 401
Connection keep-alive
Content-Length 40
X-Request-Id ac82262506edc9fb37fd533383c3f650
X-UA-Compatible IE=Edge,chrome=1
サーバー cloudinary
Access-Control-Max-Age 1728000
Access-Control-Allow-Methods POST、GET、OPTIONS
コンテンツ タイプ アプリケーション/json; charset=utf-8
Access-Control-Allow-Origin http://someurl
Cache-Control no-cache

{"エラー":{"メッセージ":"不明な 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>
4

1 に答える 1

0

data-form-data 属性は、URL エンコードではなく HTML エンコードする必要があります。たとえば、例の 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;}
于 2013-05-06T12:51:22.573 に答える