CSV PapaParse doesn't work for some links

Question

I'm using PapaParse for my CSV file with JavaScript. I'm able to use a CSV file from this website and using this link, which is the 5th one down. Everything works great using this link.

The problem arises when I download this file and then upload it to either github or one of my websites and then use that link instead. So basically, if I use the same file hosted on a different site the parser doesn't work. Any idea why?

Update:

Rawgit does work for github.com files but I still can't seem to parse CSV files from my website. It's just a link so I don't know why it wouldn't work. Thoughts?

Also, the first link above is from github.io. Why do CSV files that are on github.io work and not files from github.com or my website?

document.getElementById('submit').addEventListener("click", function() {
  checkLogin();
});

function checkLogin() {

  /* DOESN'T WORK */
  // "https://github.com/dhust/test/blob/master/Formaldehyde.csv"
  // "http://csfor.us/cs1/wp-content/uploads/2017/06/Formaldehyde.csv"

  /* WORKS */
  // "https://vincentarelbundock.github.io/Rdatasets/csv/datasets/Formaldehyde.csv"

  Papa.parse("https://vincentarelbundock.github.io/Rdatasets/csv/datasets/Formaldehyde.csv", {
    download: true,
    complete: function(results) {
      document.getElementById("output").innerHTML = results.data;
      console.log(results.data);
    }
  });
}

<script src="https://cdn.rawgit.com/mholt/PapaParse/3bf63f0a/papaparse.min.js"></script>
<input id="submit" type="button" value="Submit" />
<p id="output"></p>

Link to JSFiddle

score 1 · Accepted Answer · answered Jun 02 '17 at 17:19

1

Github doesn't allow direct downloading of files like that (see https://stackoverflow.com/a/4605068/320546).

Also for note, your Javascript console would have something like

XMLHttpRequest cannot load https://github.com/dhust/test/blob/master/Formaldehyde.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

If however, you use RawGit you can get a link that should work, and indeed seems to be fine on JSFiddle

answered Jun 02 '17 at 17:19

Tom Parker-Shemilt

1,679
15
26

Rawgit does indeed work. Any idea why it doesn't work from my own site? I need a better solution for students. – tazboy Jun 02 '17 at 18:49
Again, see the Javascript console. On JSFiddle, which is all HTTPS, Chrome won't let you load from your site as it's HTTP `Mixed Content: The page at 'https://jsfiddle.net/davehust/rkk86ery/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://csfor.us/cs1/wp-content/uploads/2017/06/Formaldehyde.csv'. This request has been blocked; the content must be served over HTTPS.` – Tom Parker-Shemilt Jun 02 '17 at 23:07
Thanks for the help. – tazboy Jun 03 '17 at 18:51

score 0 · Answer 2 · answered Jun 03 '17 at 18:55

0

Thanks to palfrey for leading me in the right direction. Here is what solved my problem:

Add SSL to each of my websites (free for basic SSL)

Added this to my .htaccess file in each website's root folder

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

answered Jun 03 '17 at 18:55

tazboy

1,685
5
23
39

Still need to research if all of those methods are needed. Seems to allow too much and could allow for malicious activity. – tazboy Jun 03 '17 at 18:58

CSV PapaParse doesn't work for some links

2 Answers2