angularjscorscross-domainng-file-uploadrackspace-cloudfiles

CORS issue with Rackspace CloudFiles


I have an Angular 1.x application using the popular ng-file-upload to make a request to the Rackspace OpenCloud library for uploading files to a CDN.

In a nutshell the script below - uploads a file, sends it to the backend of the application & in turn sends a request to the Rackspace Container and returns the public URL. This all works fine in Postman without issues - when I implement this into my Angular application I have some issues with CORS (see upload code below) - the frontend Angular sends a request to our backend app which in turn sends a request to the OpenCloud to upload a file to the Rackspace CDN and returns the public URL.

// frontend Angular app

        Upload.upload({
            url : 'https://asite.com/users/request',
            data : {
                __token : $localStorage.token.value,
                fileToUpload : file
            }
        // additional code below not shown for clarity

In the console log I see the following : ( I have the changed the actual url below for security purposes) :-

Failed to load https://xxxxxxxxxxxxxx-2426685a61633353dfd5b28cdbf2b449.ssl.cf3.rackcdn.com/5a7d6de352a949.48129019.pdf: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://domain.local' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How do I prevent this CORS error so it loads the file from the CDN?


Solution

  • fixed - the issue was actually on the PHP backend (in case it helps out somebody else)

    $object = $container->DataObject();
    $object->Create(array(
            'name' => $filename, 
            'content_type' => $mime, 
            'extra_headers' => array('Access-Control-Allow-Origin' => '*'
    )), $file);
    

    I needed to add this in the extra headers array when creating the file using the OpenCloud SDK