Level up your Box knowledge with brand new learning paths on Box University. Visit training.box.com to get started

Box Status

CORS Errors with Box UI Kit

Follow
New post
amenter

I am using the Content Picker in the Box UI Kit, but when I call the .show() function of the Content Picker, I get the following javascript error on Google Chrome:

 

Fetch API cannot load https://api.box.com/2.0/folders/0?offset=0&limit=1000&fields=name%2Curl%2Ct…lowed_shared_link_access_levels%2Chas_collaborations%2Cis_externally_owned. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3267' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have added "http://locahost:3267" and "http://localhost" to my allowed CORS domains, but the problem persists. It also occurs on other browsers. For example, in IE11, I receive the following error:

 

SEC7120: Origin http://localhost:3267 not found in Access-Control-Allow-Origin header.

Is there something else I should be doing, other than adding localhost to the allowed CORS domains? My javascript code intializing the Content Picker is minimal, but seems to be compatible with the code in the tutorial:

var folderID = '0';
var accessToken = getParameterByName('code');
var filePicker = new Box.FilePicker()

filePicker.show(folderID, accessToken, {
    container: '.container'
});

Why am I experiencing these errors?

0

Comments

12 comments

Date Votes
  • mschwartz

    Hello - thanks for reaching out! 

     

    It looks like there's an issue with the CORS allowed domains. Are the URLs entered as below (with your own localhost url, of course)? There should be a comma between the two values and no trailing slashes. 

     

    8019e67-Screen_Shot_2017-01-25_at_2.53.20_PM

    0
    Comment actions Permalink
  • amenter

    Yes, the URLs are comma-separated and contain no trailing slashes.

     

    cbHF1N3

    0
    Comment actions Permalink
  • mschwartz

    Thanks for sharing. We have not been able to replicate this issue. 

     

    In your CORS, can you please add https: in addition to http: for port 3267? Or, can you try using port 8080 instead? 

    0
    Comment actions Permalink
  • amenter

    I added the domains with HTTPS to my allowed CORS domains, and also ran the project using port 8080. Unfortunately, the issue persists:

     

    gCanGgc

    0
    Comment actions Permalink
  • mschwartz

    What is the token that you're using? The easiest way to test this is to use a Developer Token. You can generate this in the Box Developer Console. This token expires after 60 minutes, so if you're using an older token, you might need to refresh it. 

     

    Does that work?

    0
    Comment actions Permalink
  • amenter

    I was using a token generated by OAuth. But even substituting this for a freshly generated developer token, the error does not change or go away. 

    0
    Comment actions Permalink
  • amenter

    This issue unfortunate still persists. I noticed when I went back to my application settings that they seemed to have forgotten the allowed domains I had entered before. However, even upon entering the appropriate domains and clicking "save changes", the error persisted.

    0
    Comment actions Permalink
  • Priyajeet

    Does your folder id / auth token combination work if you use it here https://codepen.io/box-platform/pen/PWPxBm. Replace the values shown in there and click Run on top. Don't save.

    0
    Comment actions Permalink
  • amenter

    I'm afraid that produces the same 401 error, even though I have all relevant URLs within my allowed CORS Domains:

     

    cors domains.png

    0
    Comment actions Permalink
  • Priyajeet

    Unfortunately that generally means that token you got is not working. Does the developer token (that you generate on the developer console's config page) work instead on that codepen?

    0
    Comment actions Permalink
  • amenter

    I produced that 401 error by testing with the developer token I generated. It does not work.

    0
    Comment actions Permalink
  • yamilquery

    You just need to revoke your current developer token and try with the new one!

     

    Enjoy!

    0
    Comment actions Permalink

Please sign in to leave a comment.