AJAX - No 'Access-Control-Allow-Origin' header error, despite passing valid header

Highlighted
New Contributor

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

Tags (3)
2 REPLIES 2
Highlighted
Box Employee

Re: AJAX - No 'Access-Control-Allow-Origin' header error, despite passing valid header

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. 

 

2000.png

 

You can learn more about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

 

Occasional Contributor

Re: AJAX - No 'Access-Control-Allow-Origin' header error, despite passing valid header

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"