Question

15

Cannot fetch data from localhost using Sveltekit

rated 0 times [ 20] [ 5] / answers: 1 / hits: 6012 / 3 Years ago, mon, november 15, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stefanicarolinat

Add To Favorites

Follow

Total Points: 145

Total Questions: 91

Total Answers: 93

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

stefanicarolinat questions

1 Add nonce to script tag

Fri, Apr 16, 21, 00:00, 3 Years ago

1 How do you input an ASCII art image into the console in JS?

Thu, Oct 15, 20, 00:00, 4 Years ago

1 jest: How to teardown after (just) an individual test

Fri, Jul 17, 20, 00:00, 4 Years ago

1 How to run code (Google/Doubleclick Ads) without block main thread

Tue, Nov 26, 19, 00:00, 5 Years ago

1 How can I use fs.createReadstream with fs.promises

Fri, May 10, 19, 00:00, 5 Years ago

View All

answered 3 Years ago tristani · Accepted Answer

OK, I found the solution. Actually I should not have put "Access-Control-Allow-Origin": "*" in the request header. CORS is taken care of, if server is peroperly configured to allow the origin. In my case I just had to user cors middleware in gin:

r.Use(cors.Default())

Here is the working solution if sveltekit:

 <script context="module">

  export async function load({ fetch }) {

    const res = await fetch('http://127.0.0.1:9000/v1/articles');

    const articles = await res.json() ;

  if (res.ok) return { props: { articles: articles } };

  return {

    status: res.status,

    error: new Error()

   };

  }

</script>

  

  <script>

    export let articles = [];    

  </script>



 

<h2>Articles</h2>

 

{#each articles as article}

   <h4>{article.title}</h4>

{/each}