从Vue CLI迁移至Vite后，如何解决axios.options请求代理失效问题？

问题根源 #

Vite默认代理（基于http-proxy-middleware）会自动拦截OPTIONS预检请求，直接返回204状态码，不会把请求转发到后端。这就是你看到浏览器显示204，但后端完全没收到请求的原因——这是Vite代理的默认优化行为，目的是快速处理跨域预检。

解决步骤 #

要让OPTIONS请求正常转发到后端，需要修改vite.config.ts里代理的configure配置，手动关闭代理自动处理OPTIONS请求的逻辑：

具体配置代码 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': { // 替换成你的实际接口前缀
        target: 'https://你的后端服务地址',
        changeOrigin: true,
        configure: (proxy) => {
          // 拦截OPTIONS请求，不自动响应，让请求转发到后端
          proxy.on('proxyReq', (_, req, res) => {
            if (req.method === 'OPTIONS') {
              res.destroy()
            }
          })
        }
      }
    }
  }
})

额外注意事项 #

• 配置生效后，后端就能收到OPTIONS请求，你可以在后端针对特定上下文设置允许的HTTP方法，返回对应的Access-Control-Allow-Methods等跨域头。
• 测试前建议清空浏览器缓存，避免旧的预检缓存影响结果。
• 如果你需要完全由后端控制响应内容，也可以在代理配置里添加selfHandleResponse: true，但这种方式需要确保后端正确处理所有响应逻辑，避免出现响应异常。

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