You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
Requests always fail from deployed website, but work fine in localhost
I'm using the SDK for requests from my Next.js website. Everything works fine in localhost, but as soon as it is deployed on Vercel, I can only get 400 Errors for my requests to the API. See the ...
Thank you for this additional guidance.
I could not make it work at first, but found a solution. For anyone else, new to making this kind of API calls and relying too much on abstracted calls with the SDK (like me), the data needs to be encoded before being passed to the body.
const data = { grant_type: 'refresh_token', refresh_token: refreshToken, client_id: clientId, client_secret: clientSecret, }; const response = await fetch(`https://api.dropboxapi.com/oauth2/token`, { method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded', }, // Note this: the data needs to be encoded first! body: new URLSearchParams(data), }); console.log(await response.json());Thanks again for your concern and patience!
Hi Greg, I finally found a fix. I still have no idea why this request URL was changed, but most important was to get it working.
I had to make a direct request to the API (with the precise URL) to get a temporary access token, then create the Dropbox instance with it. Thereafter, I can keep the same system for making requests, since the only mismatch in the URL was related to the refresh token request. Some pieces of code, in case someone runs into the same issue:
export const getDropboxApiClient = async () => {
// Get the refresh token, client ID and secret
const refreshToken = process.env.NEXT_PUBLIC_DROPBOX_REFRESH_TOKEN;
const clientId = process.env.NEXT_PUBLIC_DROPBOX_APP_KEY;
const clientSecret = process.env.NEXT_PUBLIC_DROPBOX_APP_SECRET;
// Make the call with a specific address
const response = await fetch(
`https://api.dropboxapi.com/oauth2/token?grant_type=refresh_token&refresh_token=${refreshToken}&client_id=${clientId}&client_secret=${clientSecret}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: null,
},
);
const data = await response.json();
const token = data.access_token;
// Create the instance with that access token
const dbx = new Dropbox({ accessToken: token });
return dbx;
};
And then I can make requests the same way as before:
const dbx = await getDropboxApiClient();
const availableSpace = await dbx.usersGetSpaceUsage();
The only issue here is that my private keys (refresh token, app ID and secret) are visible in the Headers, when navigating to the request headers, in the Debugger. But I'm sure I'll find a quick fix to that.
Thanks a lot for your help, I had given up already before you pointed me to the right direction.
Greg-DB
Dropbox Staff
Dropbox StaffThanks for following up, and for sharing your code. It does seem like something is rewriting those requests but unfortunately I can't say what that might be. In any case, I'm glad to hear you got this working.
By the way, the /oauth2/token endpoint does accept these parameter either on the URL or in the body, so for example (using curl for illustration), instead of:
curl -X POST "https://api.dropboxapi.com/oauth2/token?refresh_token=REFRESH_TOKEN&grant_type=refresh_token&client_id=APP_KEY&client_secret=APP_SECRET"you can do:
curl -X POST "https://api.dropboxapi.com/oauth2/token" --data "refresh_token=REFRESH_TOKEN&grant_type=refresh_token&client_id=APP_KEY&client_secret=APP_SECRET"(The "content-type" would be "application/x-www-form-urlencoded".)
Thank you for this additional guidance.
I could not make it work at first, but found a solution. For anyone else, new to making this kind of API calls and relying too much on abstracted calls with the SDK (like me), the data needs to be encoded before being passed to the body.
const data = { grant_type: 'refresh_token', refresh_token: refreshToken, client_id: clientId, client_secret: clientSecret, }; const response = await fetch(`https://api.dropboxapi.com/oauth2/token`, { method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded', }, // Note this: the data needs to be encoded first! body: new URLSearchParams(data), }); console.log(await response.json());Thanks again for your concern and patience!
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
