CORS issue with file uploading API
I'm posting a file to "https://upload.box.com/api/2.0/files/content" from my react application but it throws CORS error.
I added my localhost to the CORS whitelist in configuration section of my box app but that doesn't work too.
Then I deployed my frontend to live server thinking that may be box API is getting issues with local environment. I added the live url to CORS whitelist but no luck with this too.
I've already spent handsome amount of time but getting failed. Kindly assist me in this regard.
I shall be very grateful to you.
Regards
-
Do the upload requests you're making include an `HTTP origin` header?
For more information, we have a guide on best practices for CORS: https://developer.box.com/guides/best-practices/cors/ -
I read somewhere that CORS error can occur because, your access token doesn't allow uploading to that folder, the folder Id doesn't have the permission for the token to upload, or the http payload is incorrect.
In my case:
1) I checked to make sure my web hosting URL is whitelisted in my Box app
2) make sure the folderId (that I want to upload to) has the access permission
3) make sure I didn't reference the wrong folderId, so use another API (e.g. createFolder) create a sub-folder
So in my case it was #4, my http header & body request was mal-formatted.
- having a "/" at the end of the URL causes this problem
- the file content must be read either as a string (e.g. plain text for text file) or as a binary (I used ArrayBuffer). It doesn't support Base64 file content
- do not declare the Content-Type: multipart/form-data in the header, even though the documentation said it's multipart/form-data.
- must create a JS Blob object type or JS File object type to store file content; can't just pass the content and assigned it to "file" attribute.
I use Angular 9 so what I found out was that documentation for Upload API is not very clear. For JavaScript developers here's how to format your POST request:
const BOX_UPLOAD_API_URL = "https://upload.box.com/api/2.0/files/content"; <-- my mistake was adding "/" at the end of this URL
let reader: FileReader = new FileReader();
reader.readAsArrayBuffer(file_object);
//reader.readAsDataURL(file_object);
reader.onloadend = event => {
file_object.raw = reader.result;
//To get the base64 from the raw data from readAsDataURL
//file.raw = file.raw.split(",")[1]; <-- I tried using Base64, but Box Upload API doesn't seem to support it
};
let httpOptions = {
headers: new HttpHeaders({
Authorization: "Bearer " + accessToken
//"Content-Type": "multipart/form-data", <--- this is NOT NEEDED, hardcoding this causing the boundary to get dropped from the header
})
};
let formData = new FormData(); <-- must use FormData object
let formAttributes = {
name: fileName,
parent: {
id: folderId
}
};// JS file-like object (can be either "new Blob" or "new File" object type)
//fileBinary is either plain text or binary; in my case I uses ArrayBuffer to read the file
//fileType is mime type (e.g. text/plain, application/pdf, image/jpeg, etc..)
let blob = new Blob([file.raw], { type: fileType });
formData.append("attributes", JSON.stringify(formAttributes));
formData.append("file", blob); <-- must append file content LAST
this.http.post(BOX_UPLOAD_API_URL, formData, httpOptions);
Please sign in to leave a comment.
Comments
3 comments