What link do I use to read a JPG with code?

[mappingsupport]

I put a JPG on dropbox (in a subfolder) and I am trying to download that JPG using a javascript fetch command.  My code works fine with JPGs hosted on various other servers including Google Drive.

My javascript code is using this link:  https://www.dropbox.com/scl/fi/ea9go6nont63t556sy6o4/WA_Chiwaukum_big_open_topo.jpg?rlkey=m7girlv2c7...

The purpose for downloading the JPG is so my code can use the cache API to save the JPG on the user's device.  This is all part of the GeoJPG web app I developed for offline maps.

If I enter the above link into a browser tab then I am invited to  download the JPG.  However, when I try to download the JPG content with my javascript then the following error messages show up in the browser's console.

Failed to load ‘https://www.dropbox.com/scl/fi/ea9go6nont63t556sy6o4/WA_Chiwaukum_big_open_topo.jpg?rlkey=m7girlv2c7.... A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: NetworkError when attempting to fetch resource.’.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dropbox.com/scl/fi/ea9go6nont63t556sy6o4/WA_Chiwaukum_big_open_topo.jpg?rlkey=m7girlv2c7.... (Reason: CORS request did not succeed). Status code: (null).

What am I missing?

[Greg-DB · Accepted solution]

The www.dropbox.com website does not allow CORS requests, so attempting to access that from browser JavaScript will fail like that. There's also some information and options on these links here.

Alternatively, if you want to programmatically download content from a shared link in JavaScript, you can instead use the Dropbox JavaScript SDK. In particular, the sharingGetSharedLinkFile method allows an app to specify a shared link URL and get the linked file data back.