尝试上传到Cloudinary时收到混淆错误

我一直在尝试让cloudinary上传工作。
使用来自php cloudinary库的示例，它可以正常工作，并且可以毫无问题地上传。
当我将代码移入现有的Laravel应用程序时，遇到问题。即我在控制台中此错误：
尝试上传到Cloudinary时收到混淆错误

 
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloudinaryname/auto/upload. The request was redirected to 'http://localhost/laravelappfolder/cloudinary_co…=%23%3CSet%3A0x0000000c3691e0%3E&type=upload&version=1457930756&width=1920', which is disallowed for cross-origin requests that require preflight.

我一直想找到的东西，可以点我在正确的方向，但我似乎无法找到任何东西。它可以独立运行，但在laravel应用程序中失败。代码是完全一样的（使用相同的jQuery）。
在我的laravel视图中。我使用的是无符号的上传功能：

{!! cl_unsigned_image_upload_tag('fileupload', 'repository', 
["callback" => $cors_location, 
"public_id"=>"blahblah".time(), 
"html" => ["multiple" => true], 
"class" => "form-control"]) 
!!}

$ cors_location提供位置随附的PHP库的CORS HTML文件。 laravel内的位置是正确的。
我知道这可能是一件简单的事情，但我只是想不出它会是什么。
这里是jQuery代码：

$(function() { 
      $('.cloudinary-fileupload') 
        .fileupload({ 
         dropZone: '#file_drop', 
         start: function() { 
          $('.status_value').text('Please wait, starting upload...'); 
         }, 
         progress: function (e, data) { 
          $('.status_value').text('Please wait, uploading...'); 
          var progval = Math.round((data.loaded * 100.0)/data.total); 
          $('#progtext').text(progval+'%'); 
          $(".progress-bar").css('width', progval+'%').attr('aria-valuenow', progval); 
         }, 
        }) 
        .on('cloudinarydone', function (e, data) { 

         $('.status_value').text('Idle'); 
         $(".progress-bar").css('width', '0%').attr('aria-valuenow', 0); 
         $.post('{{ $cloud_upcomp }}', data.result); 
         var info = $('<div class="uploaded_info"/>'); 
         $(info).append($('<div class="image"/>').append(
           $.cloudinary.image(data.result.public_id, { 
            format: data.result.format, width: 150, height: 150, crop: "fill" 
           }) 
         )); 
         $('.uploaded_info_holder').append(info); 
        }); 
     });

$ cloud_upcomp从cloudinary PHP库upload_complete.php文件的位置。
'cloudinarydone'事件永远不会被解雇，因为它给出了之前的错误。但奇怪的是，图片文件已经上传，因为我可以在我的cloudinary帐户中查看上传的文件。

这里是由Cloudinary库（即由函数生成的<input>标签）生成的HTML：

<div class="row"> 
          <div class="col-md-6" id="file_drop"> 
           <form> 
           <span class="status_value form-label">Awaiting user selection</span> 
           <input class='cloudinary-fileupload' data-cloudinary-field='fileupload' data-form-data='{"timestamp":1458079831,"callback":"http:\/\/localhost\/laravel\/public\/assets\/vendors\/cloudinary\/lib\/cloudinary_cors.html","public_id":"blahblah1458079831","upload_preset":"repository"}' data-url='https://api.cloudinary.com/v1_1/myaccount/auto/upload' multiple='1' name='file' type='file'/> 

           <div class="progress"> 
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> 
             <span id="progtext" class="progress-text"></span> 
            </div> 
           </div> 
           </form> 
          </div> 
          <div class="uploaded_info_holder"></div> 
         </div>

我刚刚改写我的帐户名称，但该网址具有正确的帐户名称，当它由函数生成时。

来源

2016-03-14 zetetic

请分享呈现的HTML页面。具体来说，上传者代码包括输入标签和相关的jQuery。 –

已将HTML代码添加到我的问题中 – zetetic

好吧，我感觉有点愚蠢和羞涩！

看来我的问题更多源于JS导入排序。

<script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.ui.widget.js') }}"></script> 
    <script type="text/javascript" 
      src="{{ asset('assets/vendors/cloudinary/js/jquery.iframe-transport.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.fileupload.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.cloudinary.js') }}"></script>

这是JS文件必须设置的顺序。他们需要成为页脚部分中的第一批JS文件，特别是在云端JQuery设置之前。
一旦我做到了这一切，一切都开始正常工作，没有错误。

来源

2016-03-18 05:08:11 zetetic

尝试上传到Cloudinary时收到混淆错误

回答

相关问题