0

I am building an app with Dropbox access, and the authorization step is returning No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access. The response had HTTP status code 400.

The app is in HTML/JQuery/Bootstrap/Cordova.

According to the documentation, I should be able to send a simple cross-site request using contentType: 'text/plain; charset=dropbox-cors-hack', but am getting the above error.

The client_id matches what is in my Dropbox/myapp App key. The redirect_uri matches what is in my Dropbox/myapp Redirect URIs.

Here is my code:

var client_id =         'matchesCodeInDropboxAppRegistration';
var response_type =     'token';
var redirect_uri =  'https://www.dropbox.com/1/oauth2/redirect_receiver';
//var csrfToken =   generateCSRFToken();
var csrfToken =     'some_val'; // in process
var data =      'response_type=' + response_type + '&client_id=' + client_id + '&redirect_uri=' + redirect_uri + '&state=' + csrfToken + '&reject_cors_preflight=true';

$.ajax( {

    method: 'GET',
    url: 'https://www.dropbox.com/1/oauth2/authorize?' + data,
    contentType: 'text/plain; charset=dropbox-cors-hack',

    success: function( html ) {

        $( "#db-modal-body" ).html( html );
    },

    error: function( jqXHR, textStatus, errorThrown ) {

        console.log( "AdminDBAuthView: db_connect: fail:", textStatus, errorThrown, jqXHR );
    }
} );

$( "#dropbox-connect" ).modal( "toggle" );

BTW, I tried this, and got the same result:

$( "#dropbox-connect" ).modal( {
    remote: 'https://www.dropbox.com/1/oauth2/authorize?' + data,
    show: true
} );

backbone.js v1.3.3 / underscore.js v1.8.3 / bootstrap v3.3.6 / JQuery v2.2.4 / cordova v6.1.1 / Node 5.10.1 / npm v3.8.6

I've been banging away at this for a while, so any help greatly appreciated.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
royhink
  • 49
  • 1
  • 9

2 Answers2

0

You're attempting to access www.dropbox.com/1/oauth2/authorize via an AJAX call, but this is actually a web page the user should access directly in their browser.

The documentation for /oauth2/authorize says:

This isn't an API call—it's the web page that lets the user sign in to Dropbox and authorize your app.

As such, it doesn't allow CORS.

You can find more information on the OAuth app authorization flow here:

https://www.dropbox.com/developers/reference/oauth-guide

Greg
  • 16,359
  • 2
  • 34
  • 44
  • Correct. I started with `$( "#dropbox-connect" ).modal( { remote: 'https://www.dropbox.com/1/oauth2/authorize?' + data, show: true } );` but no love. But it may be an issue loading a secure page into a bootstrap modal. I'll look into it. – royhink Nov 16 '16 at 21:54
0

If you check the simple request to redirect reciver for example you will see that:

content-security-policy:default-src 'none' ; worker-src blob: ; style-src https://* 'unsafe-inline' 'unsafe-eval' ; connect-src https://* ws://127.0.0.1:*/ws ; child-src blob: ; img-src https://* data: blob: ; frame-src https://* carousel://* dbapi-6://* dbapi-7://* dbapi-8://* itms-apps://* itms-appss://* ; object-src https://cfl.dropboxstatic.com/static/ https://www.dropboxstatic.com/static/ 'self' https://flash.dropboxstatic.com https://swf.dropboxstatic.com https://dbxlocal.dropboxstatic.com ; media-src https://* blob: ; font-src https://* data: ; script-src 'unsafe-eval' https://www.dropbox.com/static/javascript/ https://www.dropbox.com/static/api/ https://cfl.dropboxstatic.com/static/javascript/ https://www.dropboxstatic.com/static/javascript/ https://cfl.dropboxstatic.com/static/api/ https://www.dropboxstatic.com/static/api/ https://www.google.com/recaptcha/api/ 'unsafe-inline'  'nonce-oewijAWrBU8hHBjx84Ta' ;

and no mentions about localhost but mentioning about connect-src https://* ws://127.0.0.1

Try change your URL to http://127.0.0.1

SouXin
  • 1,565
  • 11
  • 17