Requests always fail from deployed website, but work fine in localhost

Hi Greg. Thanks a lot for taking the time to help me.

The code in the repository is the exact one being used for the deployment (with Vercel), and as you could see I'm using a minimal setup. The only other API requests I'm using are made through Google Drive and Auth0 endpoints.

There is one thing I could think of, but I'm uncertain if it's relevant. Some pages are protected, and can only be accessed if the user is connected. And /admin/dashboard is one of them.

Therefore, navigating to this page, while not being connected, redirects to the Auth0 authentification page AUTH0_ISSUER_BASE_URL. On successful login, the user is sent back to the page.

However, I've just tried making that page public again. It does not solve the issue, though I'm getting a different error, similar to what you've seen on the Vercel screenshot:

So it does make the issue a bit more specific. It looks like I should find out why these requests are not made to the Dropbox API url, though they are on localhost, and how to fix it.

I will try tweaking that domain tomorrow in the morning, it's getting late already here. Maybe I can get it back to the original one, though I did not change it. And I'll try to completely remove other libraries to isolate the problem.

Thanks again for your help! I'll keep you updated, if I were to find any lead!

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.