Vite+React+Express项目fetch请求遭CORS策略拦截求助

核心解决方案：后端配置CORS中间件 #

CORS拦截是浏览器同源策略的限制，最直接的解决方式是在Express后端通过cors中间件开放前端端口的请求权限。

1. 安装cors依赖
   在后端项目根目录执行命令：

npm install cors

2. 在App.js中配置CORS规则
   修改你的App.js，添加CORS配置（注意要放在其他中间件之前）：

const express = require('express');
const cors = require('cors');
const userRoutes = require('./user-routes');

const app = express();

// 允许来自前端5173端口的跨域请求
app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true, // 若登录需要携带cookie/身份凭证，开启此项
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS'] // 覆盖常用请求方法，自动处理预检请求
}));

// 解析JSON格式的请求体（必须放在CORS配置之后）
app.use(express.json());

// 挂载用户路由
app.use('/api/users', userRoutes);

app.listen(5000, () => {
  console.log('后端服务运行在 http://localhost:5000');
});

后端路由与控制器检查 #

确保登录相关的路由和控制器逻辑没有额外冲突：

• user-routes.js 正确定义POST登录路由：

const express = require('express');
const router = express.Router();
const { login } = require('./user-controllers');

router.post('/login', login);

module.exports = router;

• user-controllers.js 正常处理请求并返回响应：

exports.login = async (req, res) => {
  try {
    const { username, password } = req.body;
    // 此处替换为你的实际登录验证逻辑（比如查询数据库、生成token）
    if (username === 'admin' && password === 'your-password') {
      return res.status(200).json({ success: true, token: 'your-auth-token' });
    }
    res.status(401).json({ success: false, message: '用户名或密码错误' });
  } catch (err) {
    res.status(500).json({ success: false, message: err.message });
  }
};

⚠️ 不要在控制器中手动设置Access-Control-Allow-Origin等CORS头，交给cors中间件统一处理即可。

前端fetch请求格式修正 #

确保你的AdminLogin组件中fetch请求参数正确：

const AdminLogin = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const username = e.target.username.value;
    const password = e.target.password.value;

    try {
      const res = await fetch('http://localhost:5000/api/users/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', // 必须设置，否则后端无法解析JSON请求体
        },
        body: JSON.stringify({ username, password }), // 把表单数据序列化为JSON字符串
        credentials: 'include', // 若后端开启了credentials，此处需对应开启
      });

      if (!res.ok) throw new Error('登录请求失败');
      const data = await res.json();
      console.log('登录成功:', data);
      // 后续逻辑：存储token、跳转页面等
    } catch (err) {
      console.error('请求错误:', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="用户名" />
      <input type="password" name="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
};

export default AdminLogin;

额外排查点 #

如果仍出现CORS错误，检查以下内容：

1. 确认后端服务确实运行在5000端口，前端请求的URL无拼写错误
2. 查看浏览器控制台的具体错误信息：是预检请求(OPTIONS)失败，还是请求被后端拒绝？
3. 若使用环境变量管理配置，确保CORS的origin参数对应正确（开发环境用http://localhost:5173，生产环境替换为实际业务域名）

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