fetch - 使用 SvelteKit 使用外部 API 有效，但仅在重新加载路由后有效

Question

使用 SvelteKit 1.0.0-next.95 从外部 API 端点获取 JSON 数组并显示在如下模板中:

<script context="module">
  export async function load({ fetch }) {
    const url = 'https://www.schoolhouseyoga.com/api/announcement'
    const res = await fetch(url, {
      method: 'GET',
      mode: 'cors',
      headers: {
        'content-type': 'application/json'
      }
    })

    if (res.ok) {
      return {
        props: {
          sections: await res.json()
        }
      }
    }

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

<script>
  export let sections = []
</script>

<template>
  <section>
    {#if sections.length > 0}
      <div class="callout">
        <h1>Announcements</h1>
        {#each sections as section}
          <div>
            {#if section.announcements.length > 0}
              <h2>{section.section}</h2>
            {/if}
            {#each section.announcements as announcement}
              <p><b>{announcement.title} </b>- {@html announcement.description}</p>
            {/each}
          </div>
        {/each}
      </div>
    {/if}
  </section>
</template>

如果你尝试 https://www.schoolhouseyoga.com/api/announcement (CORS) 在浏览器中或使用 curl，您将获得一个包含两个元素的 JSON 数组。

当我在开发模式下运行它时，npm run dev -- --open 并在 Safari 14.1 (macOS) 上导航到这条路线，我收到 500 错误和消息，“Origin http Access-Control-Allow-Origin 不允许 ://localhost:3000。”如果我尝试在 Google Chrome 上导航到该路线，我会收到 500 错误和“TypeError:无法获取”。

但是无论使用哪种浏览器，如果我刷新页面，数据都会成功加载。导航到另一条路线然后再次返回，错误再次出现。

我猜这与 SSR 有关，但不确定该怎么做。

有什么想法吗？

Answer 1

该问题与服务器端呈现和端点的 CORS 问题有关。当服务器端代码执行提取时，它工作正常。客户端正在执行后续提取(遇到了 CORS 问题)。

虽然端点似乎启用了 CORS...

import { Router } from 'express';
import cors from 'cors';
import * as controller from './announcement.controller';

const router = Router();

router.get('/', cors(), controller.index);

但端点也在使用 Helm 并且需要

app.use(helmet.permittedCrossDomainPolicies());

在加载路线之前。

希望这对其他人有帮助。