Loading CSV data from Box into Javascript?

Box’s shared static file URLs (e.g. https://xxxxxxxx.box.com/shared/static/xxxxxxxxx.csv) do not send CORS headers, and:

They force a file download via Content-Disposition: attachment

They do not allow cross-origin AJAX/fetch/XHR requests like d3.csv()

Hence, when you use D3 or fetch() from your website, the browser blocks it due to CORS policy.

You can test this approach temporarily using a public CORS proxy like:

const proxy = "https://cors-anywhere.herokuapp.com/";
const url = proxy + "https://xxxxxxxx.box.com/shared/static/xxxxxxxxx.csv";

d3.csv(url).then(create_table);

OR

Set up a backend (Node.js, Laravel, etc.) to periodically download the CSV from Box, store it locally, and serve it with proper CORS headers.

Laravel example:

Route::get('/csv-data', function () {
    $url = 'https://xxxxxxxx.box.com/shared/static/xxxxxxxxx.csv';
    $csv = file_get_contents($url);
    return response($csv)->header('Content-Type', 'text/csv');
});

Example in Node.js:

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/csv-data', async (req, res) => {
  const boxUrl = 'https://xxxxxxxx.box.com/shared/static/xxxxxxxxx.csv';
  const response = await axios.get(boxUrl, { responseType: 'stream' });
  response.data.pipe(res);
});

app.listen(3000, () => console.log('Proxy server running'));

React/D3 side:

d3.csv('http://yourdomain.com/csv-data').then(create_table);