🔥前端跨域封神解法：Vite Proxy + Express CORS，一篇搞定所有跨域坑！

🔥前端跨域封神解法：Vite Proxy + Express CORS，一篇搞定所有跨域坑！

全网最通俗跨域教程｜前端 Vue/React 通用｜后端仅 Express｜开发 / 生产全覆盖

前言

做前端开发，跨域绝对是新手最崩溃的拦路虎 ！浏览器同源策略一拦，接口请求直接报错 No 'Access-Control-Allow-Origin'，调试半天毫无头绪。

今天直接给你两套绝杀方案 ，全程只用到 Vite 代理 + Express 后端 ：✅ 本地开发用 Vite Proxy 代理 （零后端改动，秒解决）✅ 线上生产用 Express CORS 配置（标准规范，永久生效）一文吃透，从此跨域再也不是问题！

---

一、先搞懂：到底什么是跨域？

浏览器同源策略：协议、域名、端口任意一个不同，就是跨域。

举个例子：

• 前端：http://localhost:5173（Vite 默认端口）
• 后端：http://localhost:3000（Express 服务）端口不同 → 直接跨域，接口被浏览器拦截！

典型跨域报错：No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

二、方案 1：本地开发神器 ✨ Vite Proxy 代理

核心原理

前端不直接请求后端，交给Vite 开发服务器做中间人转发 ，绕过浏览器同源限制，纯前端配置，后端零改动！

完整配置（Vue / React 二选一）

1. Vue 版本

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

export default defineConfig({
  // Vue 编译插件
  plugins: [vue()],
  // 开发服务器配置
  server: {
    // 跨域代理核心配置
    proxy: {
      // 匹配所有 /api 开头的接口
      '/api': {
        target: 'http://localhost:3000', // Express 后端真实地址
        changeOrigin: true, // 🔥 关键：伪装来源，解决跨域
        pathRewrite: {
          '^/api': '' // 路径重写，前端 /api/login → 后端 /login
        }
      }
    }
  }
})

2. React 版本

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  // React 编译插件
  plugins: [react()],
  // 代理配置和 Vue 完全一致！
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

关键配置解读

• target：Express 后端接口真实地址
• changeOrigin: true：伪装请求来源，让后端认为是同源请求
• pathRewrite：路径重写，简化前端接口书写

适用场景

仅限本地开发环境上线打包后代理失效，生产环境必须用 CORS！

---

三、方案 2：生产环境标配 🚀 Express CORS 配置

核心原理

后端在响应头中添加跨域允许规则，明确告诉浏览器：允许这个前端域名访问我的接口。

需要配置的三个核心响应头：

Access-Control-Allow-Origin: 允许的前端域名
Access-Control-Allow-Methods: 允许的请求方法
Access-Control-Allow-Headers: 允许的请求头

完整 Express 配置（直接复制可用）

// 1. 初始化项目：npm init -y
// 2. 安装依赖：npm install express cors
const express = require('express')
const cors = require('cors')
const app = express()

// 解析 JSON 请求体
app.use(express.json())

// 🔥 CORS 核心配置（生产环境必写）
app.use(cors({
  // 允许访问的前端域名（本地开发/线上替换即可）
  origin: 'http://localhost:5173',
  // 允许的请求方式
  methods: ['GET', 'POST'],
  // 允许的请求头
  allowedHeaders: ['Content-Type'],
  // 允许携带Cookie（登录场景必开）
  credentials: true
}))

// 测试接口
app.get('/user', (req, res) => {
  res.send({ 
    code: 200, 
    msg: '请求成功',
    data: { name: '前端开发者' } 
  })
})

// 启动 Express 服务
app.listen(3000, () => {
  console.log('Express 服务启动：http://localhost:3000')
})

极简原生写法（不依赖 cors 包）

如果不想安装第三方包，直接手动设置响应头：

const express = require('express')
const app = express()
app.use(express.json())

// 手动配置 CORS 响应头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:5173')
  res.header('Access-Control-Allow-Methods', 'GET,POST')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  res.header('Access-Control-Allow-Credentials', 'true')
  next()
})

// 接口
app.get('/user', (req, res) => {
  res.send({ code: 200, msg: '请求成功' })
})

app.listen(3000)

适用场景

生产环境正式上线Express 专属标准解决方案，全网通用。

---

四、Proxy vs CORS 到底怎么选？

表格

方案	适用环境	优点	缺点
Vite Proxy	本地开发	零后端改动，配置简单	上线失效
Express CORS	生产环境	标准规范，永久生效	需要后端配置

✅ 最佳实践开发用 Proxy，上线用 CORS，两套方案无缝衔接！

---

五、高频踩坑总结

1. changeOrigin: true 忘记写 → 跨域依然报错
2. 路径重写错误 → 接口 404
3. CORS 域名配置错误 → 线上依然跨域
4. 开发 / 生产配置混用 → 线上接口异常
5. 请求方式超出允许范围 → 预检请求失败

---

结语

跨域根本不是难题，只是没找对方法！Proxy 搞定开发，CORS 搞定生产，照着这篇配置，从此和跨域报错说拜拜～

需要完整 Demo 源码的小伙伴，评论区扣「跨域」直接发你！

💡 关注我，持续输出前端硬核干货，Vue/React/Express 一站式学习！