无法使用 Sveltekit 从本地主机获取数据

Question

在一个新的 Sveltetkit 项目中，我正在尝试从我的本地支持中获取剩余 API：

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

我可以看到 json 响应正在服务器的终端中打印但是我在浏览器中收到此错误：

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)

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.

尽管允许后端服务器 (in go gin) 中的所有来源并向上面的请求添加 "Access-Control-Allow-Origin": "*"，但我无法解决此 CORS 问题。所以我不知道还有什么问题。

Answer 1

那是因为您必须设置后端才能使用 CORS 中间件。在 express BE 中，安装名为 cors 的包后，命令将是 app.use(cors())。 https://www.npmjs.com/package/cors

或者对您正在处理的环境使用类似的东西。

Answer 2

好的，我找到了解决方案。其实我不应该把 "Access-Control-Allow-Origin": "*" 放在请求 header 中。如果服务器被正确配置为允许来源，则 CORS 会得到处理。在我的例子中，我只需要在 gin 中使用 cors 中间件：

r.Use(cors.Default())

下面是 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}

无法使用 Sveltekit 从本地主机获取数据

Cannot fetch data from localhost using Sveltekit

javascript

cors

svelte-3

sveltekit