Cannot fetch data from localhost using Sveltekit

Question

In a new Sveltetkit project, I'm trying to fetch rest API from my local backed:

<script context="module">
    export async function load() {
        const url = `http://127.0.0.1:9000/v1/articles`;
        const res = await fetch(url, {
            method: "GET",
            headers: {
                "Access-Control-Allow-Origin": "*"
            }
            });

        if (res.ok) {
            let articles = await res.json()
            console.log('res is:', articles);
            return {
                props: {
                    articles: articles
                }
            };
        }

        return {
            status: res.status,
            error: new Error(`Could not load ${url}`)
        };
    }
</script>
  
  <script>
    export let articles;
    
  </script>

 
<h2>List of articles</h2>

{#each articles as dastan}
  <h4>{dastan.title}</h4>
{/each}}

I can see the json response being printed in the server's terminal However I get this error in browser:

500
Failed to fetch
TypeError: Failed to fetch
    at load (http://127.0.0.1:3000/src/routes/articles/index.svelte:188:20)
    at Renderer._load_node (http://127.0.0.1:3000/.svelte-kit/dev/runtime/internal/start.js:953:37)
    at Renderer.start (http://127.0.0.1:3000/.svelte-kit/dev/runtime/internal/start.js:536:29)
    at async start (http://127.0.0.1:3000/.svelte-kit/dev/runtime/internal/start.js:1207:15)

And this error in the chrome's console

Access to fetch at 'http://127.0.0.1:9000/v1/articles' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Despite allowing all origins in the backend server (in go gin) and adding "Access-Control-Allow-Origin": "*" to request above I could not remove this CORS problem. So I have no clue what else could be wrong.

Answer 1

That's because you have to setup the backend to use CORS midlleware. In an express BE the command would be app.use(cors()) after you install the package named cors. https://www.npmjs.com/package/cors

Or use something similar for the environment you're working on.