CORS issue with file upload

Hi Sudherson,

Were you able to fix this issue? I'm also getting this so could you please give me the clue to fix this?

Thanks,

Sumant K

Hello,

Were you able to fix this issue?  Please share with us.

Hey all,

Apologies that this forum thread didn't get a reply! I'm happy to chime in here.

When investigating CORS errors in browsers, make sure you pay attention to the status code at the end of the console log error message. In 's message, there was a 401 status code, which suggests the access token was invalid. Similar to that, a 404 would indicate not found, a 403 would indicate access denied, etc.

For reasons unknown to me, browsers will often throw a CORS error for any CORS API call, even if it was not the CORS part which failed. If the API call throws an error, the browser will throw a CORS message + the API status code, which is a bit misleading. If you know what to look for though, you should be able to see that status code and troubleshoot from there.

Hope that helps!

Thanks,

Jason

Do you have PrivacyBadger Chrome extension installed? If so, either disable it or add a whitelist for *.box.com

CORS requests to box.com subdomains seem to trigger it into blocking the request.

I am still struggling with this exact issue, and have not found any suggested solutions that work.

It might make a difference that I'm using Angular.js (1.7.9) to access the API?

folder API works fine - listing and creating folders, nested folders, etc.  Segmented upload seems like it will work (started without errors) but my files are too small to use segmented upload.  Just the small file upload API comes back with this CORS error, and nothing further.  There's no error code in the response:

{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"https://upload.box.com/api/2.0/files/upload","withCredentials":true,"headers":{"Authorization":"Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX","Content-Type":"multipart/form-data","Accept":"application/json, text/plain, */*"},"data":{"attributes":{"name":"testFile","parent":{"id":"0"}},"file":"mary had a little lamb."}},"statusText":"","xhrStatus":"error"}

From the Chrome Developer Tools window:

Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/upload' from origin 'https://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST https://upload.box.com/api/2.0/files/upload net::ERR_FAILED

Firefox shows me the 400 response code:

HTTP/1.1 400 Bad Request
Date: Thu, 18 Jun 2020 14:26:51 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 161
Connection: keep-alive
Strict-Transport-Security: max-age=31536000

for these request headers:

Host: upload.box.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Authorization: Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxx
Content-Type: multipart/form-data
Content-Length: 104
Origin: https://localhost:3000
Connection: keep-alive
Referer: https://localhost:3000/maint?logs=true&auth=&user=&text=true&latest=true

with an additional clue - the request starts with a "preflight" OPTIONS request which succeeds:

HTTP/1.1 200 OK
Date: Thu, 18 Jun 2020 14:26:51 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://localhost:3000
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 3600
Access-Control-Allow-Methods: POST
Vary: Origin
Access-Control-Allow-Headers: authorization
Strict-Transport-Security: max-age=31536000

Request:

Host: upload.box.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
Referer: https://localhost:3000/maint?logs=true&auth=&user=&text=true&latest=true
Origin: https://localhost:3000
Connection: keep-alive