There are many similar question, but none really made me understand this very basic problem in plain english.
I am trying to fetch the data from this csv file in my SvelteKit-Application.
I first tried to load it in a load-function in the +page.js
file like this:
//+page.jsimport Papa from 'papaparse';export async function load({ fetch }) { const res = await fetch('https://sites.ecmwf.int/data/climatepulse/data/series/era5_daily_series_2t_global.csv' ).then((r) => r.text()); const { data } = Papa.parse(res, { header: true }); return { data };
However, I'm getting this error on the server (my terminal where I started the dev-server)
Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource at universal_fetch (<path....>node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:257:12) at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
By what I understand what's happening here is that locahost
is making the fetch-request to that ressource, but it's not allowed. Am I right in the assumption that I cannot do anything agains that, but the server where the file lives whould have to do change something in their settings?
When I put the same file in the +page.server.js
, I can fetch the ressource as the request is coming from my node-server right? I then, can pass the data forward to the frontend right?
I know this is a really basic question, but it causes a lot of confusion for me. Especially because I just tried to read the file with R
and the read_csv
-function without any issues. Why is that working so smoothly, but the fetch
on the frontend is not?