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.
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}
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.