Vue3+Vite项目添加Content-Type后遇CORS错误的解决求助

问题核心原因 #

你搞错了Vite server.cors 配置的作用——这个配置是用来控制Vite自身开发服务器是否允许外部域名请求它的资源，而你是从Vite的localhost:5173请求Express的localhost:3000，所以这个配置对跨域请求Express API完全无效。

当你添加Content-Type: application/json请求头后，浏览器会发送OPTIONS预检请求，而你的Express API没有处理这个请求，也没有返回符合要求的CORS响应头（比如Access-Control-Allow-Origin），导致跨域校验失败。

解决方案 #

方案一：在Express端配置CORS（推荐） #

直接在Express服务器中处理CORS规则，这是最标准的解决方式：

1. 安装cors依赖：

npm install cors

2. 在Express入口文件中配置CORS：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许localhost:5173的跨域请求
app.use(cors({
  origin: 'http://localhost:5173',
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS'] // 必须包含OPTIONS方法，处理预检请求
}));

// 解析JSON格式的请求体（必须加，否则无法接收POST的JSON数据）
app.use(express.json());

// 你的API路由
app.post('/api/book', (req, res) => {
  // 处理业务逻辑
  res.json({ success: true, received: req.body });
});

app.listen(3000, () => {
  console.log('Express server running on http://localhost:3000');
});

这样Express会自动处理OPTIONS预检请求，返回正确的CORS响应头，跨域问题就能解决。

方案二：用Vite代理转发请求（无需修改后端） #

如果无法修改Express代码，可以通过Vite的代理功能，让前端请求先发到Vite开发服务器，再由服务器转发到Express，绕过浏览器的CORS限制：

1. 修改vite.config.js，添加server.proxy配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 匹配所有以/api开头的请求，转发到Express服务器
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true, // 模拟请求来自Express允许的域名
        // 如果后端路由本身就是/api开头，下面的rewrite可以删除
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2. 修改前端的fetch请求为相对路径：

const req = await fetch("/api/book", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ bookId: 4 })
}).then(res => res.json())

这样Vite会把/api/book的请求转发到http://localhost:3000/api/book，因为是服务器之间的请求，浏览器不会触发CORS校验。

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