CORS issue with file upload
Used https://app.box.com/developers/services/edit/270598 to add http://localhost as CORS entry, I'm able to access https://api.box.com/2.0/folders/, but not https://upload.box.com/api/2.0/files/content
Error Message: XMLHttpRequest cannot load https://upload.box.com/api/2.0/files/content. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
-
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
-
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=31536000for 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=truewith 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=31536000Request:
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
Post is closed for comments.
Comments
5 comments