En un nuevo proyecto de Sveltetkit, estoy tratando de obtener la API de descanso de mi respaldo local:
<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}}Puedo ver que la respuesta json se imprime en la terminal del servidor. Sin embargo, aparece este error en el navegador:
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)Y este error en la consola de Chrome
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. A pesar de permitir todos los orígenes en el servidor backend ( en go gin ) y agregar "Access-Control-Allow-Origin": "*" a la solicitud anterior, no pude eliminar este problema de CORS. Así que no tengo ni idea de qué más podría estar mal.
Bien, encontré la solución. En realidad, no debería haber puesto "Access-Control-Allow-Origin": "*" en el encabezado de la solicitud. Se cuida CORS, si el servidor está configurado peroperperly para permitir el origen. En mi caso, solo tuve que usar cors middleware en gin:
r.Use(cors.Default())Aquí está la solución de trabajo si 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}Esto se debe a que debe configurar el backend para usar el midlleware CORS. En un BE express, el comando sería app.use(cors()) después de instalar el paquete llamado cors . https://www.npmjs.com/package/cors
O use algo similar para el entorno en el que está trabajando.