Cordova AWS S3 via Cloudflare XMLHttpRequest blocked by CORS policy No 'Access-Control-Allow-Origin' header is present on the requested resource

Questions
1

I think I’ve almost got this right - Javascript AJAX request in Cordova to files on AWS via a custom domain on Cloudflare sitting in front of an AWS S3 bucket, are getting the error:

Access to XMLHttpRequest at 'https://my-custom-domain.com/my-file' from origin 'https://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The CSP in my index.html in the Cordova project is:

<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com https://mysubdomain.my-custom-domain.com https://my-custom-domain.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; font-src 'self' data:;">

and the config.xml contains this:

<access origin="*" />
<access allow="https://mysubdomain.my-custom-domain.com" />
<access allow="https://my-custom-domain.com" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

JS code:

var filename = "https://my-custom-domain.com/my-file";
$.ajax({
	async: async, // Set passed in param to false to process updates in sequence
	type: 'GET',
	url: filename,
	dataType: 'json',
	success:  function(data) {
if(logging) console.log("READ FILE FROM AWS SUCCESSFULLY, " + data.length + ", type: " + typeof data + ", from: " + filename);
if(logging) console.log(data);

		successfn(data);
		},
	error: function(data) {

if(logging) console.log("Couldn't read AWS file: " + filename, 'error: ', data);

		if(errorfn) errorfn(data);
		}
	});

Any ideas where I’m going wrong please? Accessing the same file URL (that I’m trying to get via AJAX) directly in a desktop browser in the address bar, works fine. Think this just needs a slight tweak somewhere…
Thanks

2

[just adding some additional info to my question above]
What I don’t get (if I understand how CORS works) is why my CSP and config.xml aren’t allowing requests to my-custom-domain.com ? Surely they should be effectively whitelisting any file from that URL?
I am aware there’s a whitelist plugin or something, but believe that’s not for HTTPS sites?
Thanks

3

Just as the error message says, you need to set the ‘Access-Control-Allow-Origin’ header on the outgoing S3 files.

See: CORS configuration - Amazon Simple Storage Service

I’m using PHP for most of my server-side Cordova assets, so I added this line to the top of each file I access via AJAX in Cordova:

header(“Access-Control-Allow-Origin: *”);

You need to set the S3 buckets to have the same header.

4

Thanks very much, that was the info I needed to understand why I was getting this and fix it, so it’s working now. Much appreciated.