CORS Error HTTP API using Ajax

PoisonIvy

So I'm new to the Dropbox API and I've been experimenting with HTTP API calls using javascript's Ajax function. I'm currently trying to use the /create functionality but I'm encountering a CORS error.

 

Here's the code I'm using:

const title = "more_examples.txt";
	const destination = "/";

	const response = $.ajax({
		url: "https://api.dropboxapi.com/2/file_requests/create",
                type: "POST",
                dataType: 'application/octet-stream', 
                async: false, 
                headers: { 
                        "Authorization": "Bearer <TOKEN>", 
                        "Content-Type": "application/json", 
                        "data": '{"title": "' + title + '","destination": "' + destination + '","deadline": {"deadline": "2020-10-12T17:00:00Z","allow_late_uploads": "seven_days"},
                        "open": true}'
                }
        });

And here's the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://dl.dropboxusercontent.com/2/file_requests/create.
(Reason: CORS request did not succeed).

 

To make matters worse, I had previously tried downloading a file and that totally worked! Here's that code too:

        const path = "example.txt";

	const args = {
		"path": path
	};

	const response = $.ajax({
		url: "https://content.dropboxapi.com/2/files/download",
		type: "POST",
		dataType: 'application/octet-stream',
		async: false,
		headers: {
			"Authorization": "Bearer <TOKEN>",
			"Dropbox-API-Arg": '{"path": "/example.txt"}'
		}
	}); 

 

 

Any ideas about where I went wrong? I want to keep to the HTTP API rather than the python or Node one, so I'd really appreciate any advice here. I'm not sure what went wrong.

Greg-DB

Is that the actual code you ran to produce that particular error? The error mentions the 'dl.dropboxusercontent.com' hostname, which is a real Dropbox hostname, but isn't what you should be using for this API call, and isn't used in your supplied code anyway.

 

In any case, for the code you shared, it looks like there are two issues:

• You're supplying your API call parameters as a JSON string in a 'data' header. The /2/file_requests/create endpoint is an "RPC"-style endpoint though, so it expects the API call parameters as a JSON string in the request body, not a header.
• You're supplying a destination path of "/", but that should be a path to a particular folder.

 

So, your code should look more like this:

const title = "more_examples.txt";
const destination = "/some folder";

const response = $.ajax({
    url: "https://api.dropboxapi.com/2/file_requests/create",
            type: "POST",
            async: false,
            headers: {
                    "Authorization": "Bearer <token>",
                    "Content-Type": "application/json",
            },
            "data": '{"title": "' + title + '","destination": "' + destination + '","deadline": {"deadline": "2020-10-12T17:00:00Z","allow_late_uploads": "seven_days"}, "open": true}'
    });