I am building a React app where I enter the URL of a .csv file in an input field. The app should then read the contents of the .csv file. Currently, the link of the .csv file is on an Ubuntu VPS that is accessible only with the IP. I configured the nginx server of the VPS to allow access control. These are the CORS settings:

add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';

I tried other settings such as specifying the methods to be ‘GET, HEAD, OPTIONS’. When I make a curl –head through command line, I get this result:

HTTP/1.1 200 OK
Server: nginx/1.21.0
Date: Mon, 06 May 2024 23:07:16 GMT
Content-Type: text/plain
Content-Length: 1402
Last-Modified: Tue, 03 May 2022 13:49:42 GMT
Connection: keep-alive
ETag: "627132f6-57a"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
Accept-Ranges: bytes

The React app can be found on my Github (https://github.com/shivkiyer/accordion-player). The code that accesses the link is:

try {
  const result = await fetch(url, {
    method: 'GET',
  });
  console.log(result);
  const resultData = await result.text();
  console.log(resultData);
  if (result.ok) {
    return null;
  } else {
    return 'Link entered was not accessible. Please ensure it opens in a browser window.';
  }
} catch (e) {
  console.log(e);
  return 'Unexpected error occurred. Please ensure that the resource can accept AJAX requests.';
}

Even with the access control allow headers on the server, I continuously get the Cross-Origin Request Blocked error on my Firefox browser when I access the React app on localhost:3000. I built the React app and created a nginx Docker container that listens to localhost on 8080. I copied over the build into the nginx container and now it can read the .csv file on the VPS, when I access the app on localhost:8080.

If this was a server issue, would the build running in the docker container on localhost:8080 also get blocked by CORS when trying to access a remote VPS? Do I need to configure webpack or something locally for the React dev server? I googled for a few hours. I tried adding proxy to package.json and that did not work. I would rather not install cors-unblocker extensions on my Firefox browser.