We Want to Hear From You! What Do You Want to See on the Community? Tell us here!

Forum Discussion

fa11's avatar
fa11
Explorer | Level 3
9 years ago

Dropbox API: No CORS header present

Hi,

I am using the dropbox core API v2 with angularJs web client using $resource and Express REST server to access dropbox. After i moved to $resource from my client instead of $http, I am getting the following CORS error when redirecting to dropbox for OAuth2 authentication as mentioned in the Dropbox OAuth2 guide. 
If i enable a CORS extension for chrome, i don't get this error but the redirect does not happen. 

 

XMLHttpRequest cannot load https://www.dropbox.com/oauth2/authorize?client_id=...&response…...&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:3443' is therefore not allowed access.
(the redirect URI is valid as it works in the browser, i've modified the url pasted here to change client id and response for security reasons)

 

Any insight will be greatly apprecited. Here are snippets of related code:

 

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-Headers","Origin, x-access-token, X-Requested-With, Content-Type, Accept, Authorization, X-CSRF-Token, Accept-Version, Content-MD5, Date, X-Api-Version, X-File-Name");
//
//res.header("Access-Control-Allow-Headers",(req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
//intercepts OPTIONS method
if ('OPTIONS' === req.method) {
//respond with 200
res.sendStatus(200);
}
else {
//move on
next();
}
});

and

var csrfToken = generateCSRFToken();
  req.session.csrf = csrfToken;
  console.log("redirecting to dropbox uri");
  var redirectURl = url.format({
    protocol: 'https',
    hostname: 'www.dropbox.com',
    pathname: 'oauth2/authorize',
    query: {
      client_id: APP_KEY,
      response_type: 'code',
      state: csrfToken,
      redirect_uri: generateRedirectURI(req)
    }
  });
  console.log("rediect uri is "+redirectURl);
  res.redirect(redirectURl);

Thanks! 

4 Replies

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    9 years ago

    I can't offer any insight on using Angular or Express, but based on the error output, which cites XMLHttpRequest, it seems like your setup is trying to make an ajax call to /authorize, instead of sending the user there directly in their browser. The /authorize page is a web page the user needs to interact with directly, not indirectly from another page via JavaScript, so CORS shouldn't come in to play. You'll need to look in to how to configure your web framework to redirect the user normally, as opposed to making a XMLHttpRequest. Apologies I don't have any Angular or Express insight to share for that, but perhaps someone else on the forum does.

  • fa11's avatar
    fa11
    Explorer | Level 3
    9 years ago

    Hi Greg,

     

    Thanks a lot for your response! Since it seemed to work before (I made some changes to my server), I retracted my changes to my code and now am getting a slightly different version of this error which is as follows. It happens when dropbox tries to redirect to my callback function. It seems like my server refuses to accept the redirect back from dropbox:
    XMLHttpRequest cannot load https://www.dropbox.com/oauth2/authorize?client_id=...&response…..&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:3443' is therefore not allowed access.

    Any ideas? Does your response from before still apply to this case? 
    Many thanks for your time.

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    9 years ago
    As far as I can tell, the only difference between the two errors is the redaction, so I don't have any new insight to offer here.

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.6,034 PostsLatest Activity: 34 minutes ago
409 Following

The Dropbox Community team is active from Monday to Friday. We try to respond to you as soon as we can, usually within 2 hours.

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!