Astro框架Hybrid模式下POST请求失效问题求助

问题场景 #

使用Astro框架，当前配置为Hybrid输出模式（无法切换到Server模式）。前端表单（路径src/components/test.astro）显示正常，但提交时控制台抛出如下错误：

error: SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5682:19)
    at successSteps (node:internal/deps/undici/undici:5663:27)
    at consumeBody (node:internal/deps/undici/undici:5669:9)
    at _Request.json (node:internal/deps/undici/undici:5609:18)
    at Module.POST (C:/xampp/htdocs/triptodurstatic/src/pages/api/test.ts:5:32)

该功能在Server模式下可正常运行，相关代码如下：

前端组件代码（src/components/test.astro） #

<form id="contact-form">
  <label for="first-name">First Name:</label>
  <input type="text" id="first-name" name="first-name" required />

  <button type="submit">Submit</button>
</form>

<!-- Optional: Message to display after submission -->
<div id="success-message" style="display: none;">Thank you for your submission!</div>

<script>
  // Wait until the DOM is fully loaded
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('contact-form');

    form.addEventListener('submit', async function (event) {
      event.preventDefault(); // Prevent form from submitting the usual way and refreshing the page

      const formData = new FormData(form);
      const firstName = formData.get('first-name');

      // Prepare the data to send to the API
      const data = { firstName };

      try {
        const response = await fetch('/api/test', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
        });

        if (response.ok) {
          document.getElementById('success-message').style.display = 'block';
          form.reset(); // Clear the form fields
        } else {
          alert('There was an issue submitting your form.');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('Something went wrong!');
      }
    });
  });
</script>

API代码（src/pages/api/test.ts） #

export async function POST({ request }: { request: Request }): Promise<Response> {
  try {
    const formData = new URLSearchParams(await request.text()); // Parse form data
    const firstName = formData.get('firstName'); // Extract first name from form data
    console.log('Received first name:', firstName);

    // Process the form data (e.g., store in a database)
    // For simplicity, we will just return the data received
    return new Response(
      JSON.stringify({
        message: `Form submitted successfully. First Name: ${firstName}`,
      }),
      { status: 200, headers: { 'Content-Type': 'application/json' } }
    );
  } catch (error) {
    console.error('Error processing POST request:', error);
    return new Response(
      JSON.stringify({ message: 'Error processing POST request', error: error.message }),
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

问题原因 #

前端发送的是JSON格式请求（设置了Content-Type: application/json，body是JSON字符串），但后端API却用URLSearchParams解析request.text()——这是用来处理application/x-www-form-urlencoded格式数据的方法，和前端发送的格式完全不匹配。Hybrid模式下Astro对请求的处理更严格，直接暴露了这个格式不兼容的问题，而Server模式下可能因宽松的解析逻辑巧合运行。

修复方案 #

任选一种方案即可解决问题：

方案1：后端适配JSON格式请求 #

修改API代码，直接用request.json()解析前端发送的JSON数据：

export async function POST({ request }: { request: Request }): Promise<Response> {
  try {
    const { firstName } = await request.json(); // 直接解析JSON数据
    console.log('Received first name:', firstName);

    return new Response(
      JSON.stringify({
        message: `Form submitted successfully. First Name: ${firstName}`,
      }),
      { status: 200, headers: { 'Content-Type': 'application/json' } }
    );
  } catch (error) {
    console.error('Error processing POST request:', error);
    return new Response(
      JSON.stringify({ message: 'Error processing POST request', error: error.message }),
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

方案2：前端改为发送表单编码格式数据 #

修改前端的fetch逻辑，去掉手动设置的Content-Type头（浏览器会自动添加正确的application/x-www-form-urlencoded），并将body改为URLSearchParams格式：

try {
  const response = await fetch('/api/test', {
    method: 'POST',
    body: new URLSearchParams({ firstName }), // 改用表单编码格式
  });

  if (response.ok) {
    document.getElementById('success-message').style.display = 'block';
    form.reset();
  } else {
    alert('There was an issue submitting your form.');
  }
} catch (error) {
  console.error('Error:', error);
  alert('Something went wrong!');
}

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