Start a new topic

Error on download: Origin ... is not allowed by Access-Control-Allow-Origin

Hello


I'm running into a CORS error message using Kinvey's HTML/Javascript API on downloading a file (which I need to download because it's a JSON-File). The code is more or less based on samples from here. I have tried both provided ways: 

function downloadFile (gameId) {
            var query = new Kinvey.Query();
            query.equalTo('gameid', gameId).equalTo('type', 'game');
            var promise = Kinvey.Files.find(query)
                .then(function(file) {

                    // Got correct output here (so that works)
                    console.log (file);

                    // Case 1: Error message on this one
                    var promise1 = Kinvey.Files.download(file[0]._id)
                        .then(function(file) {
                            // After some time passed, redownload the file.
                            return Kinvey.Files.downloadByUrl(file[0]._downloadURL);
                        })
                        .then(function(fileData) {
                            console.log (fileData);
                        })
                        .catch(function(error) {
                            // ...
                        });

                    // Case 2: Error message on this one
                    var promise2 = Kinvey.Files.download(file[0]._id)
                        .then(function(file) {
                            var fileContent = file._data;
                            console.log (fileContent);
                        })
                        .catch(function(error) {
                            // ...
                        });
                })
                .catch(function(error) {
                    // ...
                });
        }

 The error message looks in both case similar (message in Safari browser):


[Error] Failed to load resource: Origin https://<mycorrecthomepage> is not allowed by Access-Control-Allow-Origin. (GNZAPYE.txt, line 0)


[Error] XMLHttpRequest cannot load https://storage.googleapis.com/4161a22b4be84bb5b6edf024782ddb8d/94e75273-4f14-493f-ade2-ad6ed4c96fcb/GNZAPYE.txt?GoogleAccessId=558440376631@developer.gserviceaccount.com&Expires=1532658638&Signature=C%2BbRXxJf6jQ99ZXBayLcwnXiRkV1fpCS4NcCOlVITPnmjLmIXTrEIgXqMIjGiNfG1BWOfUY2R38DX7AL84WILeSWs1xK99gfYu4x4RtkUC1JvAQkH1deRJvlcR0Lncms55tIn6P8N%2BlXAgfmJVhwSiReO6lQVvsmkFJwlfTcqww%3D. Origin https://<mycorrecthomepage> is not allowed by Access-Control-Allow-Origin.


Output Chrome browser:

/app/html/#searchmappage:1 Failed to load https://storage.googleapis.com/4161a22b4be84bb5b6edf024782ddb8d/94e75273-4f14-493f-ade2-ad6ed4c96fcb/GNZAPYE.txt?GoogleAccessId=558440376631@developer.gserviceaccount.com&Expires=1532689475&Signature=g1BXo9MnhkyY24%2FmLNNXEG32ArJyYIgtnbdMQXtFOpOXldoMk5zS58EOidQMS9RSoR1bTLMjBmk%2B2EuSed8tXR%2BEH4gKO88C1PUFD%2B5He2sgd8rFQjcn3ncbPo8BmNqS7%2BYOmxbsx5L%2Byj2OWgz4tvawHS6EKAWRlhxgoQk7xZM%3D: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.geoneer.me' is therefore not allowed access.


Output Firefox browser:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf 

-> Translation: Cross-Origin request blocked: The same source-rule probihits the reading from external resources

https://storage.googleapis.com/4161a22b4be84bb5b6edf024782ddb8d/94e75273-4f14-493f-ade2-ad6ed4c96fcb/GNZAPYE.txt?GoogleAccessId=558440376631@developer.gserviceaccount.com&Expires=1532689845&Signature=AeatadXqfN3jdq7Uq87f4orJmLqS42lf4MAtm9CLgd6GVr5bITEiYGSWvwwh2lXi9wSi2rl9XNOooSjlrcsbwLRahHCZOUHTCuXXgyWsLhwBzJuk2Dy8K564aCbOzOAn7mDfmkR2yf6AhrM9F%2B%2BCePxv%2FLIIDy2SJJSm5SkItlk%3D. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt).

-> Translation: Reason: CORS header 'Access-Control-Allow-Origin' missing)


So all 3 browsers are telling the same.

Since I'm using Kinvey's functionality I can't control any header settings or anything else allowing me to correct the problem. The Safari browser states my homepage and this confuses me. I'm trying to download the file client-wise, so my mentioned homepage is not involved at all. If you (Kinvey) restricts to download files only by the defined URL (my server) how should I and any other user be allowed to download files from/as client?


If that helps to solve the problem:I am already doing download/uploads from my server (PHP, REST API) that is working well.


If there is something I can do (on client-side), can you please tell me what and where?


Regards

1 Comment

I have tried to use the download functionalities but couldn't make it to work (all the same mentioned error message). I used the fallback scenario and let JQuery to the job and... it works. If you want to read a file with data in it, use it that way:

 $.ajax({
                                url: file._downloadURL,
                                type: 'GET',
                                dataType: 'json',
                                success: function(data) {
                                    console.log (data) // Your data from file here
                                },
                                error: function() {
                                    alert ("error");
                                }
                            });

The key is to use the _downloadURL received by "Kinvey.Files.find(query)". I initially was not aware of that. This usage doesn't collide with CORS.


Regards

Login or Signup to post a comment