SvelteKit组件能否对应endpoint？表单提交405错误解决方案咨询

我有一个SvelteKit组件，想要通过对应的+page.server.ts实现基于Cookie认证的表单动作，让组件的删除按钮通过该端点的表单动作向后端发送请求。项目结构如下：

- src/
    - components/
        - Component/
            - +page.svelte
            - +page.server.ts
    - routes/
        - route/
            - +page.svelte

组件的+page.svelte代码：

<div class="card">
    <form method="POST">
        <input type="hidden" value="{uuid}" name="uuid" />
        <button class="btn-icon variant-filled-primary">
            <span><Icon icon="material-symbols:delete-outline"></Icon></span>
        </button>
    </form>
</div>

组件的+page.server.ts代码：

import type { Actions } from './$types';
 
export const actions = {
  default: async ({ cookies, request }) => {
    // 此处执行基于http-only Cookie的认证请求和数据处理
  }
} satisfies Actions;

组件渲染正常，但点击提交按钮后浏览器报错：

405 POST method not allowed. No actions exist for this page

我推测问题出在路由的+page.svelte未定义表单动作，组件的+page.server.ts未被执行。想问这种方案是否可行？还是必须在每个使用该组件的路由里定义表单动作？这显然不够可扩展。

为什么当前方案不可行 #

SvelteKit的+page.server.ts是路由专属文件，只有放在routes/目录下的路由层级中，才会被识别为对应路由的服务器端逻辑。你把它放在components/目录下时，SvelteKit不会处理这个文件，也就不会生成对应的表单动作端点，因此提交表单时会返回405错误。

可行的替代方案 #

1. 使用API路由（+server.ts）创建独立端点

在routes/api/下创建专门处理删除请求的API路由，比如routes/api/delete-item/+server.ts：

import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ cookies, request }) => {
  const data = await request.formData();
  const uuid = data.get('uuid') as string;
  
  // 执行Cookie认证和删除逻辑
  // ...

  return new Response(JSON.stringify({ success: true }), { status: 200 });
};

修改组件的表单，指定action属性指向这个API端点：

<div class="card">
    <form method="POST" action="/api/delete-item">
        <input type="hidden" value="{uuid}" name="uuid" />
        <button class="btn-icon variant-filled-primary">
            <span><Icon icon="material-symbols:delete-outline"></Icon></span>
        </button>
    </form>
</div>

这种方式的端点独立，组件可以在任何路由中复用，无需每个路由重复编写逻辑。

2. 封装可复用的Action函数

如果想继续使用页面表单动作，可以把删除逻辑封装成独立函数，在需要使用组件的路由+page.server.ts中导入复用：
首先创建共享的action函数，比如src/lib/actions/deleteItem.ts：

import type { RequestEvent } from '@sveltejs/kit';

export async function deleteItem(event: RequestEvent) {
  const data = await event.request.formData();
  const uuid = data.get('uuid') as string;
  
  // 执行Cookie认证和删除逻辑
  // ...

  return { success: true };
}

然后在路由的+page.server.ts中导入使用：

import type { Actions } from './$types';
import { deleteItem } from '$lib/actions/deleteItem';

export const actions = {
  deleteItem
} satisfies Actions;

最后修改组件的表单，指定action和命名动作：

<div class="card">
    <form method="POST" action="?/deleteItem">
        <input type="hidden" value="{uuid}" name="uuid" />
        <button class="btn-icon variant-filled-primary">
            <span><Icon icon="material-symbols:delete-outline"></Icon></span>
        </button>
    </form>
</div>

这种方式需要每个使用组件的路由注册动作，但核心逻辑是复用的，避免重复代码。

总结 #

你最初的方案不可行，因为组件目录下的+page.server.ts不会被SvelteKit识别为有效服务器逻辑文件。推荐使用API路由实现完全可复用的删除功能，或者封装共享action函数减少重复代码。

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