Vite-Vue开发环境中如何将HTTP请求重定向至ASP.NET API

问题背景 #

需要在Vite+Vue项目的开发模式（执行npm run dev）下，将所有HTTP请求从http://localhost:5173重定向到ASP.NET API服务地址http://localhost:5815，但此前两种代理配置均引发错误。

错误配置解析 #

第一种代理根路径/的问题 #

将根路径/全部代理到API服务器，会导致Vite自身的静态资源（如Vue入口文件、样式、图片等）也被转发到API端——ASP.NET API无法处理这类前端资源，直接引发加载错误或404。同时，重写规则path.replace(/^\//, '')会移除路径开头的斜杠，进一步导致路径混乱。

第二种代理/api前缀的问题 #

该配置仅对带/api前缀的请求生效，若前端请求未添加此前缀，请求仍会发送到localhost:5173，无法实现“所有请求代理”的需求，进而出现跨域或404问题。

正确配置方案 #

要实现和Vue CLI中devServer: { proxy: 'http://localhost:5815' }一致的全请求代理效果，需在Vite配置中排除自身静态资源的代理，仅转发API请求。

方案一：用正则匹配排除静态资源 #

修改vite.config.js如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    cssCodeSplit: false,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      // 匹配所有非Vite静态资源的请求
      '^/(?!@|src|assets|favicon\\.ico|index\\.html)': {
        target: 'http://localhost:5815',
        changeOrigin: true
      }
    }
  }
})

方案二：用bypass函数过滤请求 #

更直观的方式是通过bypass函数判断哪些请求不需要代理，直接由Vite处理：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    cssCodeSplit: false,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/': {
        target: 'http://localhost:5815',
        changeOrigin: true,
        bypass: (req) => {
          // 静态资源请求直接返回，不代理
          if (req.url.startsWith('/assets/') || req.url === '/index.html' || req.url.startsWith('/src/')) {
            return req.url;
          }
        }
      }
    }
  }
})

推荐方案（API带统一前缀） #

如果你的ASP.NET API有统一前缀（如/api），更建议用以下配置，同时在前端请求时统一添加前缀，避免和静态资源路径冲突：

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:5815',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

前端请求示例（以axios为例）：

// 全局设置baseURL
axios.defaults.baseURL = '/api'
// 请求接口时使用相对路径
axios.get('/users') // 实际转发到http://localhost:5815/users

配置说明 #

• changeOrigin: true：必须开启，代理会修改请求头的Host为目标API地址，避免ASP.NET API的跨域验证拦截。
• bypass/正则排除：核心作用是让Vite自己处理前端静态资源，只把API请求转发到ASP.NET服务器，这是Vite和Vue CLI代理的核心区别——Vue CLI会自动排除静态资源，而Vite需要手动配置。

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