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