CORS issue with file uploading API

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/

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.

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