Sveltekit Actions返回JSON乱码问题求助

问题根源 #

你混淆了SvelteKit的**Actions（页面表单交互）和API Routes（纯API接口）**的使用场景，同时前端响应处理逻辑有误，导致返回格式不符合预期。

修复方案 #

方案一：使用API Route（推荐用于纯API请求） #

如果你的需求是提供一个API接口供前端调用，按以下步骤修改：

1. 创建正确的API路由文件
   替换原来的api/fetch/+page.server.js，创建src/routes/api/fetch/+server.js，代码如下：

   export async function POST({ request }) {
     // 调用外部接口获取JSON
     const externalResponse = await fetch('https://exterual-url-that-returns-json', {
       method: 'GET'
     })
     const data = await externalResponse.json()
   
     // 返回标准JSON响应
     return new Response(JSON.stringify(data), {
       headers: {
         'Content-Type': 'application/json'
       }
     })
   }
   

2. 修正前端调用代码
   直接解析响应的JSON，无需额外处理：

   const response = await fetch('/api/fetch', {
     method: 'POST'
   })
   const data = await response.json()
   console.log(data) // 此时得到的就是 { foo: bar, foo2: bar2 } 格式的对象
   

方案二：正确使用Actions（用于页面表单场景） #

如果你的需求是配合页面表单使用Actions，按以下步骤调整：

1. 调整路由文件位置
   将api/fetch/+page.server.js移动到src/routes/fetch/+page.server.js（去掉api/前缀），代码保持不变：

   export const actions = {
     default: async ({ request }) => {
       const response = await fetch('https://exterual-url-that-returns-json', {
         method: 'GET'
       })
       return await response.json()
     }
   }
   

2. 修正前端调用逻辑
   指定Accept头获取JSON格式的Action响应，直接读取result.data：

   const response = await fetch('/fetch', {
     method: 'POST',
     headers: {
       'Accept': 'application/json'
     }
   })
   const result = await response.json()
   console.log(result.data) // 直接得到目标对象，无需JSON.parse
   

关键说明 #

• SvelteKit中api/路径下必须使用+server.js文件定义API接口，+page.server.js仅用于页面的服务端逻辑（如Actions、load函数）。
• 之前出现的数组格式异常，是错误路由配置导致响应结构被意外解析，修正路由后即可解决。

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