前端工作实战：如何在vite中配置代理解决跨域问题

什么是CORS?

CORS代表"跨域资源共享"，是一种安全标准，它使服务器能够指示允许浏览器请求资源的源。它的创建是为了改进同源策略（SOP），浏览器使用该策略来防止恶意应用程序访问它们无法控制的域上的敏感数据

使用CORS的好处是什么？

CORS在提高灵活性和互操作性的同时改善了应用程序的整体安全状态。它的主要好处包括：

增强的API安全性：CORS有助于防止恶意应用程序向不同域中的敏感资源发出未经授权的跨域请求。通过放宽同源策略（SOP）并通过CORS头要求明确的权限，它降低了跨站点请求伪造（CSRF）攻击和未经授权的数据访问的风险。
跨域身份验证：CORS允许在跨域请求中传输凭证（如cookie或身份验证令牌），从而实现安全的跨域身份验证。这对于单点登录（SSO）和其他身份验证机制至关重要。
标准化：CORS是一种被所有主流web浏览器支持的标准化机制。这种跨浏览器的统一实现确保了处理跨域请求的一致和可靠的方法。
API集成：CORS对于集成web应用程序和外部API至关重要，使开发人员能够在自己的服务中利用第三方功能。

在 Vite 中解决 CORS 跨域问题

你在开发中遇到的这个错误是典型的浏览器 CORS (跨域资源共享) 安全限制问题。以下是几种在 Vite 中解决此问题的方法：

方法 1：配置 Vite 开发服务器代理 (推荐)

这是最常用的解决方案，通过 Vite 的开发服务器转发 API 请求：

修改 vite.config.ts 文件：

typescript 复制代码

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 匹配所有以 '/prod-api' 开头的请求
      '/prod-api': {
        target: 'http://106.119.167.29:90', // 后端服务器地址
        changeOrigin: true, // 需要虚拟托管站点
        rewrite: (path) => path.replace(/^\/prod-api/, '') // 重写路径
      }
    }
  }
})

修改你的 API 请求地址为 /prod-api/auth/tenant/list（去掉域名部分）

方法 2：配置后端允许跨域

最佳的做法是让后端服务器添加 CORS 头：

makefile 复制代码

Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

如果是 Spring Boot，可以添加 @CrossOrigin 注解；如果是 Node.js Express，可以使用 cors 中间件。

方法 3：开发时禁用浏览器安全限制

注意：这不适合生产环境，仅用于开发测试

Chrome 启动时添加参数：

ini 复制代码

chrome.exe --disable-web-security --user-data-dir="C:/Temp"

或者

css 复制代码

google-chrome --disable-web-security --user-data-dir=/tmp/chrome

最佳实践建议

开发环境：使用 Vite 的代理配置（方法1）
生产环境：确保后端正确配置 CORS 头，或通过同域名部署前后端
API 设计 ：前后端统一 API 前缀（如 /api/），便于代理配置

这些方法中最推荐的是第一种代理方式，它不会改动你的生产代码，只影响开发环境，且能完美解决本地开发时的跨域问题。