AJAX - No 'Access-Control-Allow-Origin' header error, despite passing valid header
I'm using the following AJAX request to attempt to create a folder in the root folder:
$.ajax({
url: 'https://api.box.com/2.0/folders',
type: 'POST',
data: { name: name, parent: { id: 0} },
headers: {
'Authorization': 'Bearer ' + userToken,
'Access-Control-Allow-Origin': 'http://clientdomain.dev'
},
})
I've also added the clients testing domain to the CORS settings for the app, as well as successfully uploaded files with a modified version of this request.
What am I missing? I've clearly got the header, and it's valid as it worked for uploading.
Any suggestions or direction greatly appreciated
-
Access-Control-Allow-Origin header is something you cannot append with your request. It's the server's response that will add it, assuming your application has that domain whitelisted. There is a text box to whitelist your domain under the configuration page of your application in the developer console. Enter it there.
You can learn more about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
-
Bumping an old thread... similar issue, but with a twist:
I have registered a CORS Domain allowed origin of: https://192.168.??.??:3000 and I have been using the folder contents and make folders API endpoints
https://api.box.com/2.0/folders/'+id.toString()+'/items?limit=1000&fields=id,type,name
https://api.box.com/2.0/folders
with no problems - successfully retrieving folder contents and creating new nested sub-folders using AngularJS (1.7.9). However, when I try to use the Upload file API:
https://upload.box.com/api/2.0/files/content
I am getting this error in my Chrome Developer Tools window:
Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/content' from origin 'https://192.168.67.15:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I also tried specifically adding the full IP address (no wildcards) to the CORS list, and using localhost, same result.
What is different about the upload API vs the folders APIs? More to the point, how can I get my file upload to start working?
The response received in the Angular $http.post error handler doesn't reveal much:
{"data":null,
"status":-1,
"config":{"method":"POST",
"transformRequest":[null],
"transformResponse":[null],
"jsonpCallbackParam":"callback",
"headers":{"Authorization":"Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"Content-Type":"multipart/form-data",
"Accept":"application/json, text/plain, */*"},
"url":"https://upload.box.com/api/2.0/files/content",
"data":{"attributes":{"name":"testFileName","parent":{"id":"0"}},
"file":"mary had a little lamb."
}
},
"statusText":"",
"xhrStatus":"error"}
Update: The "Try this API" in the documentation https://developer.box.com/reference/post-files-content/ also fails with "An unknown error occured"
-
If you try to make a cross-origin request and your server isn't set up correctly, you'll get the warning "No 'access-control-allow-origin' header is present on the requested resource." You'll need to either configure your server to handle cross-domain requests or find a means to get around the difficulty by using non-cross-domain requests instead. https://kodlogs.net/313/no-access-control-allow-origin-header-is-present-on-the-requested-resource-jquery
Post is closed for comments.
Comments
3 comments