SvelteKit中从+page.server.ts访问内部API出现308重定向问题

问题原因 #

出现308重定向是因为服务端fetch请求的URL末尾多了一个斜杠（/api/getSummary/?summaryId=20），SvelteKit的路由系统会自动规范化URL，移除多余的末尾斜杠，因此触发重定向。而服务端fetch默认不会自动跟随重定向，导致你拿到308响应，且原API端点未被实际访问。

解决方案 #

方案1：修正请求URL（推荐） #

直接去掉URL末尾的斜杠，确保请求地址和SvelteKit路由规范化后的地址一致：

import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ fetch, params }) => {
    const getSummary_response = await fetch(`/api/getSummary?summaryId=20`, {
        method: "GET",
    });

    const getSummary_response_data = await getSummary_response.json();
    console.log("getSummary_response_data:", getSummary_response_data);
}

方案2：开启自动跟随重定向 #

如果需要保留末尾斜杠（不推荐），可以在fetch选项中添加redirect: 'follow'，让fetch自动跟随重定向请求正确地址：

import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ fetch, params }) => {
    const getSummary_response = await fetch(`/api/getSummary/?summaryId=20`, {
        method: "GET",
        redirect: 'follow'
    });

    const getSummary_response_data = await getSummary_response.json();
    console.log("getSummary_response_data:", getSummary_response_data);
}

补充说明 #

前端组件中的fetch能正常工作，是因为浏览器的fetch默认会自动跟随重定向，而SvelteKit提供给服务端load函数的fetch默认行为不同，需要显式处理或修正URL。

内容的提问来源于stack exchange，提问作者Rawrcasm