如何设置SvelteKit API端点接受跨域POST请求（仅开放特定端点）

方法一：单个端点内禁用CSRF校验 #

SvelteKit支持在指定服务器端点中跳过CSRF检查，无需全局关闭防护。在目标端点的+server.js/+server.ts文件中添加如下代码：

// src/routes/path/+server.js
export async function POST({ request, locals }) {
  // 仅对当前端点跳过CSRF校验
  locals.csrf.skip = true;

  // 处理请求逻辑
  const data = await request.json();
  return new Response(JSON.stringify({ received: data }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}

这种方式只会开放/path端点，其他路由仍保持默认的CSRF防护，安全性更高。

方法二：携带合法CSRF令牌（推荐安全方案） #

如果需要保留CSRF防护的同时允许跨源请求，可让请求方携带合法令牌：

1. 在页面的+page.server.js中生成并返回CSRF令牌：

// src/routes/any-page/+page.server.js
export async function load({ locals }) {
  return {
    csrfToken: locals.csrf.token
  };
}

2. 将令牌提供给跨源请求方，让他们在请求时通过X-CSRF-Token请求头或表单字段_csrf携带该令牌，SvelteKit会自动验证令牌合法性。

方法三：配置CORS限制允许的源 #

针对跨域请求，可通过handle钩子添加CORS头，仅允许指定源访问目标端点：

// src/hooks.server.js
export async function handle({ event, resolve }) {
  const origin = event.request.headers.get('origin');
  // 仅允许指定源访问/path端点
  if (origin === 'https://your-allowed-domain.com' && event.url.pathname === '/path') {
    const response = await resolve(event);
    response.headers.set('Access-Control-Allow-Origin', origin);
    response.headers.set('Access-Control-Allow-Methods', 'POST');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type');
    return response;
  }
  return await resolve(event);
}

结合前两种方法使用，能进一步缩小允许的请求范围，提升安全性。

测试提示：用curl发起请求时，需指定Content-Type: application/json（SvelteKit对默认表单编码的POST请求CSRF校验更严格），命令如下：

curl -i -X POST http://127.0.0.1:5173/path -H "Content-Type: application/json" --data "{}"

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