Can't resolve Dropbox.com redirects with Axios or D3-fetch

Question

I'm trying to fetch data in the browser from a Dropbox link: https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1

Using Axios this works in Node:

axios.get('https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1').then(x => {
  console.log('Received correctly')
  console.log(x.data);
}).catch(error => {
    console.log('Error', error.message);
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);      
    }
    console.log(error) 
});

https://runkit.com/stevebennett/5dc21d04bbc625001a38699b

However it doesn't work in the browser (click the "Console" tab):

https://codepen.io/stevebennett/pen/QWWmaBy

I just get a generic "Network Error". I see the 301 Redirect being retrieved, which seems perfectly normal, but for some reason, it is not followed.

Exactly the same happens with D3: "NetworkError when attempting to fetch resource."

https://codepen.io/stevebennett/pen/KKKoZYN

What is going on?

Answer 1

This appears to be failing because of the CORS policy. Trying this with XMLHttpRequest directly fails with:

Access to XMLHttpRequest at 'https://www.dropbox.com/s/101qhfi454zba9n/test.txt?dl=1' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS isn't allowed on www.dropbox.com itself.