如何在Svelte-kit开发(dev)模式下配置API请求代理

SvelteKit 本地开发服务底层基于 Vite 构建，代理规则不在svelte.config.js顶层SvelteKit专属配置项中定义，直接在同文件内的Vite配置段添加规则即可。

配置步骤 #

• 打开项目根目录的svelte.config.js文件
• 在Vite配置的server.proxy字段下添加路径匹配规则，参考配置如下：

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // 保留原有kit配置项
  },
  vite: () => ({
    // 保留原有其他vite配置项
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true
        }
      }
    }
  })
};

export default config;

配置效果 #

配置完成后重启svelte-kit dev服务，所有匹配/api/**规则的请求（例如发起的http://localhost:3000/api/upload请求），都会自动转发到http://localhost:8080/api/upload地址，业务代码不需要修改请求路径。

常用扩展配置 #

• 若后端接口路径不带/api前缀，需要转发时移除该前缀，可添加配置项：rewrite: (path) => path.replace(/^\/api/, '')
• 若需要代理WebSocket请求，添加配置项：ws: true
• 若目标服务使用自签名HTTPS证书，添加配置项：secure: false

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