为Storybook（Angular + Vite）配置代理问题求助

你的Angular项目中用于Postman Echo API的代理配置在Storybook中不生效，核心原因是Storybook（Vite版）的代理配置逻辑和Angular CLI不同，需要针对Storybook的Vite环境单独配置，以下是两种可行方案：

方案1：直接在.storybook/main.ts中配置代理 #

这是最直接的方式，利用Storybook的viteFinal选项注入代理规则：

1. 打开.storybook/main.ts，修改配置如下：

import type { StorybookConfig } from '@storybook/angular-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/angular-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  viteFinal: async (config) => {
    config.server = {
      ...config.server,
      proxy: {
        '/post': {
          target: 'https://postman-echo.com',
          secure: true,
          changeOrigin: true,
        },
      },
    };
    return config;
  },
};

export default config;

2. 完全重启Storybook服务，此时组件发送的/post请求会被代理到https://postman-echo.com/post，不再指向localhost:6006。

方案2：复用项目根目录的Vite配置 #

如果项目已有根目录的vite.config.ts，可以抽离代理配置并复用：

1. 在根目录vite.config.ts中添加代理规则：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/post': {
        target: 'https://postman-echo.com',
        secure: true,
        changeOrigin: true,
      },
    },
  },
});

2. 修改.storybook/main.ts导入并合并配置：

import type { StorybookConfig } from '@storybook/angular-vite';
import viteConfig from '../vite.config';

const config: StorybookConfig = {
  // 保留原有其他配置
  viteFinal: async (config) => {
    return {
      ...config,
      server: {
        ...config.server,
        proxy: viteConfig.server?.proxy,
      },
    };
  },
};

export default config;

关键注意事项 #

• 必须完全重启Storybook，热重载无法加载新的代理配置
• 组件请求路径需使用相对路径/post，避免硬编码localhost:4200或localhost:6006
• secure: true适配Postman Echo的HTTPS协议，若遇SSL证书问题可临时设为false（生产环境不推荐）

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