前端开发环境中的CORS问题与代理解决方案

问题背景

在开发一个前后端分离的聊天系统时，遇到了典型的CORS（跨域资源共享）问题。前端应用运行在 localhost:5173，后端服务运行在 localhost:8080，当前端尝试直接访问后端API时出现了以下错误：

Access to XMLHttpRequest at 'http://localhost:8080/api/v1/message/rooms' from origin 'http://localhost:5173' has been blocked by CORS policy

问题分析

1. 直接请求方式（会触发CORS）

当我们在前端配置文件 .env.development 中使用完整的URL：

VITE_API_BASE_URL=http://localhost:8080/api/v1

请求流程：

浏览器(localhost:5173) ----直接请求----> 后端服务器(localhost:8080)

这种方式会导致CORS问题，因为：

• 前端和后端运行在不同的端口（5173和8080）
• 不同端口被浏览器视为不同源
• 触发浏览器的同源策略(Same-Origin Policy)检查
• 需要后端正确配置CORS响应头

2. 代理请求方式（避免CORS）

将前端配置修改为使用相对路径：

VITE_API_BASE_URL=/api/v1

同时在 vite.config.js 中配置代理：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

请求流程：

浏览器(localhost:5173) ----请求----> Vite开发服务器(localhost:5173) ----代理请求----> 后端服务器(localhost:8080)

这种方式可以避免CORS问题，因为：

• 浏览器的请求首先发送到同源的Vite开发服务器
• Vite服务器将请求代理转发到后端
• 代理是在服务器端进行的，不受浏览器同源策略的限制
• 对浏览器来说，这是一个同源请求

解决方案

1. 修改前端环境配置文件 .env.development：

VITE_API_BASE_URL=/api/v1
VITE_WS_URL=ws://localhost:8080

2. 确保 vite.config.js 中配置了正确的代理：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

3. 重启前端开发服务器

后端CORS配置（可选）

如果确实需要后端支持CORS，可以添加以下配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("http://localhost:*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

总结

1. 开发环境中的最佳实践：

   • 使用Vite代理功能来处理API请求
   • 配置相对路径而不是完整URL
   • 避免直接处理CORS问题

2. 为什么使用代理更好：

   • 简化开发环境配置
   • 避免浏览器的同源策略限制
   • 不需要后端额外的CORS配置
   • 更接近生产环境的部署方式（通常使用nginx代理）

3. 注意事项：

   • 代理配置只在开发环境中生效
   • 生产环境需要proper的CORS配置或代理设置
   • WebSocket连接可能需要单独的CORS配置

参考资料

• Vite代理配置文档
• Spring CORS配置文档
• MDN CORS文档