CORS Error, when try to read CSV file in the same directory using PapaParse

Question

I am trying to read the CSV file using PapaParse but facing CORS policy error:

index.html:1 Access to XMLHttpRequest at 'file:///Users/macbook/Downloads/hh/csv/Patient_Experience.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I am using following code snipped

var myurl='csv/Patient_Experience.csv';
Papa.parse(myurl, {
    header: true,
    download: true,
    dynamicTyping: true,
    complete: function(results) {
        console.log(results);
    }
});

Also, file is present in csv directory like that csv/Patient_Experience.csv I tried to put csv file in s3 and allow cors policy there but still facing same issue.

Note: I am not using any node or any other library. Its simple plain HTML, JS flow.

Papa.parse is trying to load the file via an XMLHttpRequest, which doesn't work in a `file:///` environment. You need to use a webserver and access your page via `http://localhost...` — , Apr 28 '21 at 17:10
What if, I wanted to add these files in media player. It is working if I try to add in media player. My question is, Media player linux based players, so if it is working on media players then this should work on other environments too. — Ahmad, Apr 28 '21 at 18:13

score 0 · Answer 1 · answered Apr 28 '21 at 19:25

I solved the issue with following.

Install http-server in your terminal.
Run this command again.
http-server your_project_directory -p 3000
your_project_directory, this will contain the index.html which contains script (reading from CSV using papaParse).

CORS Error, when try to read CSV file in the same directory using PapaParse

1 Answers1