SvelteKit+Auth.js登录异常：跨站POST表单提交被禁止

问题分析 #

出现Cross-site POST form submissions are forbidden错误，核心原因是SvelteKit的CSRF保护拦截了跨站POST请求，直接通过signIn函数发起的POST请求在部署环境中被判定为跨站请求；同时Auth.js未正确信任部署主机，加剧了该问题。

解决方案 #

1. 配置Auth.js信任主机 #

在/src/hooks.server.ts中添加trustHost: true，让Auth.js信任当前部署的主机：

// /src/hooks.server.ts
import { SvelteKitAuth } from "@auth/sveltekit"
import Google from "@auth/core/providers/google"
import { GOOGLE_ID, GOOGLE_SECRET } from "$env/static/private"

export const handle = SvelteKitAuth({
    trustHost: true, // 新增：信任当前主机
    //@ts-expect-error issue https://github.com/nextauthjs/next-auth/issues/6174
    providers: [Google({
        clientId: GOOGLE_ID,
        clientSecret: GOOGLE_SECRET,
    })]
});

2. 替换登录触发方式为GET请求 #

避免使用on:click调用signIn发起POST请求，改用直接跳转GET链接的方式，绕过CSRF限制：

<!-- /src/routes/+layout.svelte 中替换原登录Button代码 -->
{:else}
    <a href="/auth/signin/google?callbackUrl=https://amc.grapecoder.repl.co/" data-sveltekit-preload-data="off">
        <Button size="sm">Sign in</Button>
    </a>
{/if}

3. 验证Google OAuth回调URL #

确保在Google Cloud Console的OAuth 2.0客户端配置中，回调URL设置为：

https://amc.grapecoder.repl.co/auth/callback/google

原理说明 #

• trustHost: true：让Auth.js自动识别部署环境的主机地址，避免因主机头不匹配导致的跨站判定。
• GET请求方式：Auth.js的/auth/signin/[provider]端点支持GET请求发起认证流程，这种方式不会触发SvelteKit的跨站POST表单拦截，直接跳转到Google登录页面。

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