AstroJS+Svelte SSR应用中页面重定向失效问题求助

我开发了一个集成Svelte的AstroJS SSR应用，在Svelte中实现用户注册表单，提交至Astro API端点完成注册。表单采用POST请求，期望注册成功后跳转至首页，但Astro日志显示已执行重定向（302状态），页面却停留在原页面未跳转，请求排查原因。

相关代码 #

1. Astro页面 src/pages/signup.astro #

---
import MainLayout from '@/layouts/Main.astro';
import SignupForm from "@/components/auth/SignupForm.svelte";
---

<MainLayout>
    <SignupForm client:load />
</MainLayout>

2. Svelte表单组件 src/components/SignupForm.svelte #

<script>
    import * as yup from "yup";
    
    let email = null;
    let password = null;

    let errors = {};


    function validate()
    {
        const schema = yup.object().shape({
            email: yup.
                string().
                required("We need your email to sign you up").
                email("Your email must be of the form <b>name@example.com</b>"),
            
            password: yup.
                string().
                required("We need a password to sign you up").
                min(8, "Your password must be at least 8 characters long")
        });

        try
        {
            errors = {};
            
            schema.validateSync({ email, password }, { abortEarly: false });

            return true;
        }
        catch (e)
        {
            e.inner.forEach(error => {
                errors[error.path] = error.message;
            });

            return false;
        }
    }
    
    async function onSubmit(e)
    {
        if (!validate())
        {
            return;
        }

        const form = new FormData(e.currentTarget);

        const response = await fetch("/api/signup", {
            method: "POST",
            body: form,
        });
        
        const json = await response.json();

        console.log(`in svelte form response: ${JSON.stringify(json)}`);
    }
</script>

<div class="flex flex-col items-center m-4">
    <form class="p-8 border border-gray-400 max-w-lg lg:w-1/3 rounded-lg bg-gray-200" novalidate on:submit|preventDefault={onSubmit}>
        <div class="my-4">
            <label for="email" class="mb-2 block text-sm font-bold">Email</label>
            <input
                type="email"
                name="email"
                placeholder="name@example.com"
                class="w-full shadow appearance-none border rounded p-3"
                bind:value={email}
            >
            {#if errors.email}
                <p class="my-2 text-sm text-red-500">{@html errors.email}</p>
            {/if}
        </div>
    
        <div class="my-4">
            <label for="password" class="mb-2 block text-sm font-bold text-gray-700">Password</label>
            <input
                type="password"
                name="password"
                placeholder="shhh . . . don't tell anyone"
                class="w-full shadow appearance-none border rounded p-3"
                bind:value={password}
            >
            {#if errors.password}
                <p class="my-2 text-sm text-red-500">{errors.password}</p>
            {/if}
        </div>

        <div class="my-4">
            <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Signup</button>
        </div>
    </form>
</div>

3. Astro API端点 src/pages/api/signup.js #

import Auth from "@/services/auth";

export const POST = async({request, redirect}) => {
    const form = await request.formData();

    const email = form.get("email");
    const password = form.get("password");

    const response = Auth.signup(email, password);

    if (response.error)
    {
        return new Response(
            JSON.stringify(response),
            { status: response.error.code }
        );
    }
    
    return redirect("/");
};

4. Astro配置文件 astro.config.mjs #

import { defineConfig } from 'astro/config';
import node from "@astrojs/node";

import svelte from "@astrojs/svelte";

// https://astro.build/config
export default defineConfig({
  devToolbar: {
    enabled: import.meta.env.DEV
  },
  output: "server",
  adapter: node({
    mode: "hybrid"
  }),
  integrations: [svelte()]
});

控制台日志 #

18:33:48 [200] /signup 4ms
signing up new user with email xxxx@xxxxx.com and password ftjjkyhgktjyt
21:24:08 [302] POST /api/signup 2ms
21:24:09 [200] / 3ms

问题原因及解决方法 #

• 核心原因：前端用fetch发起POST请求时，浏览器会自动跟随302重定向获取目标页面内容，但不会主动更新当前页面的URL或跳转页面。日志里的[200] /是fetch请求后台首页的记录，而非浏览器主动跳转。
• 解决方法1：修改前端逻辑处理重定向
  在Svelte组件的onSubmit函数中，检查响应的状态码，若为302则手动跳转：

  async function onSubmit(e) {
      if (!validate()) {
          return;
      }
  
      const form = new FormData(e.currentTarget);
  
      const response = await fetch("/api/signup", {
          method: "POST",
          body: form,
      });
  
      // 处理重定向
      if (response.redirected) {
          window.location.href = response.url;
          return;
      }
  
      const json = await response.json();
      console.log(`in svelte form response: ${JSON.stringify(json)}`);
  }
  

• 解决方法2：改为原生表单提交（无需fetch）
  移除on:submit|preventDefault，让表单以传统方式提交，此时浏览器会自动处理302重定向：

  <!-- 移除preventDefault -->
  <form class="..." novalidate on:submit={onSubmit}>
  

  同时修改onSubmit函数，仅做前端验证，无需手动发起请求：

  async function onSubmit(e) {
      if (!validate()) {
          e.preventDefault(); // 验证失败时阻止提交
      }
      // 验证通过则由浏览器自动提交表单
  }
  

• 补充说明：若使用redirect()返回重定向，Astro会设置Location头，但fetch不会触发页面跳转，必须手动处理或改用原生表单提交。

内容的提问来源于stack exchange，提问作者code-tinkerer