SvelteKit本地服务跳转Spotify授权接口时出现CORS错误

核心问题分析 #

你遇到的 CORS 错误，根源不是 SvelteKit 的跨域配置问题，而是前端调用 /login 端点的方式错误：

• 你用 fetch 发起 AJAX 请求调用 /login，服务器重定向到 Spotify 授权接口后，fetch 会自动跟进这个重定向请求，而 Spotify 的授权接口并没有配置允许 localhost:5173 的跨域访问，因此触发了 CORS 拦截。
• Spotify 的授权流程要求用户直接通过浏览器导航到其授权页面，而非通过 AJAX 请求间接访问。

解决方案 #

1. 前端修改按钮跳转逻辑 #

把前端按钮的 fetch 调用改为直接页面跳转，让浏览器主动导航到 /login 端点：

<!-- 方式1：原生 JS 跳转 -->
<button on:click={() => window.location.href = '/login'}>登录 Spotify</button>

<!-- 方式2：用 SvelteKit 内置的 goto 函数 -->
<script>
  import { goto } from '$app/navigation';
</script>
<button on:click={() => goto('/login')}>登录 Spotify</button>

2. 修正 /login 端点的配置 #

• 补全 redirect_uri：Spotify 要求重定向 URI 必须是完整的 HTTP/HTTPS 地址，不能只写 localhost:5173，且该地址必须提前在你的 Spotify 开发者后台的「重定向 URI」列表中配置。
• 改用 302 临时重定向：授权流程属于临时跳转，用 302 比 308（永久重定向）更合适。

修改后的端点代码：

import { redirect } from '@sveltejs/kit';

export function GET() {
    const params = new URLSearchParams({
        response_type: 'code',
        client_id: '你的客户端ID',
        scope: 'playlist-modify-private playlist-read-private',
        redirect_uri: 'http://localhost:5173/callback' // 完整URL，需在Spotify后台配置
    });

    const authEndpoint = 'https://accounts.spotify.com/authorize?' + params.toString();
    throw redirect(302, authEndpoint);
}

3. 为什么不需要配置 SvelteKit CORS #

当浏览器直接导航到 /login 时，服务器返回重定向响应后，浏览器会直接跳转到 Spotify 的授权页面——这属于正常的浏览器页面导航，不属于 AJAX 跨域请求范畴，因此不需要在 SvelteKit 中配置任何 CORS 规则。

内容的提问来源于stack exchange，提问作者Anthony.MG