Sveltekit 1.0：+page.server.js调用API失败及页面重载加载异常

问题1：+page.server.js中fetch失败（500错误） #

原因 #

服务器端（Node.js环境）运行时，localhost指向的是SvelteKit容器自身，而非宿主机的localhost，因此无法通过http://api.localhost访问FastAPI服务。另外，VITE_前缀的环境变量仅暴露给客户端代码，服务器端读取会存在兼容性问题。

解决方案 #

1. 使用Docker服务名访问后端：在Docker Compose网络中，容器可通过服务名直接通信。假设你的FastAPI服务在docker-compose.yml中命名为fastapi，服务器端API地址改为http://fastapi/names。
2. 添加服务器专用环境变量：在.env文件中新增非VITE前缀的变量，示例：

   BACKEND_URL_SERVER=http://fastapi/names
   VITE_BACKEND_URL=http://api.localhost/
   

3. 修改+page.server.js代码：

   /** @type {import('./$types').PageServerLoad} */
   const BACKEND_URL = import.meta.env.BACKEND_URL_SERVER;
   
   export const load = async () => {
       const res = await fetch(BACKEND_URL);
       if (!res.ok) {
           throw new Error(`请求失败：${res.status}`);
       }
       const { names } = await res.json();
       return { names };
   };
   

问题2：+page.js重载时API调用失败，仅客户端导航成功 #

原因 #

页面重载会触发服务器端渲染（SSR），此时+page.js中的fetch在服务器端执行，同样遇到localhost指向容器自身的问题；而点击页面链接是客户端导航，fetch在浏览器中运行，能正常解析api.localhost域名。

解决方案 #

在+page.js中区分客户端/服务器端环境，动态选择API地址：

1. 导入SvelteKit环境判断变量：

   /** @type {import('./$types').PageLoad} */
   import { browser } from '$app/environment';
   

2. 动态切换API地址：

   const BACKEND_URL_CLIENT = import.meta.env.VITE_BACKEND_URL + "names";
   const BACKEND_URL_SERVER = import.meta.env.BACKEND_URL_SERVER;
   
   export const load = async ({ fetch }) => {
       const url = browser ? BACKEND_URL_CLIENT : BACKEND_URL_SERVER;
       const res = await fetch(url);
       if (!res.ok) {
           throw new Error(`请求失败：${res.status}`);
       }
       const { names } = await res.json();
       return { names };
   };
   

3. 确保.env中的BACKEND_URL_SERVER已正确配置（同问题1步骤）。

额外注意事项 #

• 确认docker-compose.yml中FastAPI服务名称正确，示例：

  services:
    fastapi:
      build: ./backend
      # 其他配置...
    svlt:
      build: ./frontend
      # 其他配置...
    traefik:
      # 其他配置...
  

• 服务器端fetch无浏览器跨域限制，直接用服务名访问无需额外CORS配置；客户端仍需确保FastAPI允许svlt.localhost的跨域请求。

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