CORS issue with file uploading API

新規投稿

2020年03月22日 23:39

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

3件のコメント

anoland

2020年04月07日 08:29
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/
0

コメントアクションパーマリンク
MangoCats

2020年06月17日 18:30
When I try to add an origin: header to my POST, it is rejected as an unsafe header.

What's frustrating to me is that the Box folder API is working fine, it's just the Box upload API which throws this CORS error.
0

コメントアクションパーマリンク

FranklinPOC

2020年09月03日 02:57
編集済み

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);

サインインしてコメントを残してください。