尝试上传到Cloudinary时收到混乱的错误

Question

I've been trying to get the cloudinary upload to work.
Using the sample from the php cloudinary library, it works fine as stand alone and uploads without a problem.
It's when I move the code into an existing Laravel app I run into a problem. Namely I get this error in the console:

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.

I've been trying to find something that could point me in the right direction but I can't seem to find anything. It works fine as stand alone, but fails in the laravel app. The code is exactly the same (using the same jquery).
In my laravel view I have. I'm using the unsigned upload function:

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

$cors_location provides the location to the cors html file that comes with the php library. The location from within laravel is correct.
I know it's probably something simple that I'm missing but I just can't think of what it could be.
Here is the JQuery code:

$(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 is the location of the upload_complete.php file from the cloudinary php library.
The 'cloudinarydone' event is never fired, as it gives the error from before. But strangely, the image file has been uploaded as I can view the uploaded file in my cloudinary account.

Here is the HTML generated by the Cloudinary library (namely the <input> tag generated by the function):

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

I've just overwritten my account name, but the URL has the correct account name when it gets generated by the function.

Answer 1

Ok I'm feeling a little foolish and sheepish!

It seems my problem stems more from JS import ordering.

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

This is the order the JS files must be set. And they need to be the first group of JS files within the footer section, especially before the cloudinary JQuery set up.
Once I did this, it all started working fine without errors.