Vite开发服务器CORS失效但Webpack开发服务器正常问题排查

问题原因 #

• Webpack Dev Server此前大概率配置了接口代理，将对远程Java BE的请求转发至目标服务器，浏览器实际请求的是本地开发服务器，规避了跨域限制；而Vite默认无此代理配置，浏览器直接向远程BE发起跨域请求，触发CORS校验失败。
• 远程Java BE服务器未配置允许本地开发域名（localhost.devcommweb100.somecompany.com）的跨域响应头，导致预检请求未通过浏览器的访问控制检查。

解决建议 #

配置Vite接口代理 #

在Vite配置文件（vite.config.js或vite.config.ts）中添加server.proxy配置，将接口请求转发至远程BE服务器，避免浏览器直接跨域：

import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
  server: {
    // 配置公司提供的SSL证书与密钥
    https: {
      cert: fs.readFileSync('./path/to/your-local-cert.crt'),
      key: fs.readFileSync('./path/to/your-local-key.key')
    },
    proxy: {
      // 根据实际接口前缀配置，示例匹配/px/th开头的请求
      '/px/th': {
        target: 'https://th-api-devmir2405212107.px.nonprod.somecompany.io',
        changeOrigin: true, // 确保请求头中的Host字段与目标服务器匹配
        secure: true // 目标为HTTPS服务，启用安全校验
      }
    }
  }
});

• 若远程BE主机名频繁变动，可将目标地址存入环境变量（如.env文件中的VITE_BE_TARGET），在配置文件中通过import.meta.env.VITE_BE_TARGET动态获取。

调整前端请求路径 #

确保应用内的fetch请求使用相对路径（如/px/th/appointment）而非远程BE的完整URL，这样请求才会被Vite代理拦截转发。

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