Svelte中fetch请求方法随调用位置异常变更问题排查

一、核心问题分析 #

点击触发POST请求时出现OPTIONS方法，本质是两个原因叠加：

1. 按钮默认行为干扰：你的按钮是type="submit"，如果嵌套在<form>标签内，点击会触发表单默认提交行为，导致页面刷新、中断fetch请求，浏览器请求流程被打乱，表现为OPTIONS请求异常。
2. 非简单请求的CORS预检：使用FormData的POST请求属于非简单请求，浏览器会自动发送OPTIONS预检请求验证权限。表单默认行为中断请求后，预检响应处理异常，最终抛出NetworkError。

组件初始化时直接调用POST正常，是因为没有表单提交的默认行为干扰，请求流程完整，后端能正确响应OPTIONS预检。

二、解决方案 #

1. 阻止按钮默认提交行为 #

有两种可行方式：

• 修改按钮类型：将type="submit"改为type="button"，彻底避免表单提交行为：

<input
  class="flat submit"
  type="button"
  value="+"
  on:click={newStep}
/>

• 在事件中阻止默认行为：若必须保留submit类型，在点击事件中添加event.preventDefault()：

<input
  class="flat submit"
  type="submit"
  value="+"
  on:click={async (event) => {
    event.preventDefault();
    await newStep();
  }}
/>

2. 优化fetch请求写法（可选但推荐） #

避免async/await与.then()混用，统一代码风格提升可读性：

async function newStep() {
  let formData = new FormData();
  formData.append("name", "NAME");
  formData.append("desc", "DESC");
  formData.append("collection", selected);

  try {
    const response = await fetch(`http://127.0.0.1:1357/api/v1/step/`, {
      method: "POST",
      headers: {
        Authorization: "Basic " + btoa("Admin:stackoverflow<3"),
      },
      body: formData,
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

3. 兜底检查后端CORS配置 #

确保Go-gonic后端的CORS中间件允许：

• 前端Origin（如开发环境的http://localhost:5173）
• POST、OPTIONS方法
• Authorization头

示例Go-gonic CORS配置参考：

import "github.com/gin-contrib/cors"

func main() {
  r := gin.Default()
  r.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"http://localhost:5173"},
    AllowMethods:     []string{"GET", "POST", "OPTIONS"},
    AllowHeaders:     []string{"Authorization", "Content-Type"},
    AllowCredentials: true,
  }))
  // 其他路由配置
}

三、Svelte异步请求库推荐 #

1. @tanstack/svelte-query（Svelte Query） #

完全对标React Query，支持缓存、自动重请求、分页、无限滚动等功能，是Svelte生态中主流的异步状态管理库，API设计与React Query高度一致，学习成本低。

2. svelte-swr #

基于SWR（Stale-While-Revalidate）理念的轻量实现，简洁易用，适合简单场景下的请求缓存与状态管理。

3. Axios #

若不需要复杂状态管理，Axios可替代原生fetch，提供更简洁的API、请求/响应拦截器、自动JSON转换等功能，与Svelte兼容良好。

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