Vue前端搭配Express后端CORS配置错误导致同网手机无法请求后端如何解决

问题根源 #

你的CORS配置只允许来源为http://localhost:8080的请求，手机访问前端时，页面的源地址是http://192.168.178.20:8080，和白名单不匹配，所以请求被CORS策略拦截。CORS校验的是发起请求的前端页面的源地址，和客户端设备的IP无关，不需要把手机IP加入白名单。

另外你当前的配置存在冗余冲突：同时使用了cors中间件和自定义响应头设置CORS规则，二者会互相覆盖导致异常，需要先清理重复配置。

开发环境修复方案 #

修改后的代码如下：

import cors from 'cors';
import express from 'express';
import cookieParser from 'cookie-parser';

const SERVER_PORT = 8081;
const app = express();

// 开发环境允许的前端源列表
const ALLOWED_ORIGINS = [
  'http://localhost:8080',
  'http://192.168.178.20:8080'
];

app.use(cors({ 
  origin: (origin, callback) => {
    // 无origin的请求（如Postman调试）允许通过，生产环境可移除该判断
    if (!origin || ALLOWED_ORIGINS.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  allowedHeaders: ['x-access-token', 'Origin', 'Content-Type', 'Accept'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
}));

// 移除你原来自定义的CORS响应头中间件，避免重复配置冲突

app.use(express.urlencoded({ 
  extended: true 
}));

app.use(express.json());
app.use(cookieParser());

// 路由逻辑...

app.listen(SERVER_PORT, () => {
  console.log(`Backend is listening on port ${SERVER_PORT}`);
});

生产环境正确CORS配置规范 #

• 禁用通配符*：开启credentials的场景下通配符不生效，同时会带来安全风险
• 严格控制允许的源列表：只添加线上实际部署的前端域名，比如前端部署在https://www.example.com就仅将该地址加入列表，不要保留开发阶段的本地、局域网地址
• 使用环境变量管理源列表：区分开发、测试、预发、生产等不同环境的允许源，避免配置混杂
• 不要依赖CORS做安全控制：CORS只是浏览器层面的访问限制，核心接口必须额外加鉴权逻辑，防止恶意调用
• 正确处理预检请求：cors中间件默认已经处理OPTIONS预检请求，无需额外配置，确保预检请求返回200状态码即可

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