react 前端调用 express 接口获取 mysql 博客数据时空白无渲染，根本原因是浏览器同源策略拦截了跨域请求——后端未配置 cors 响应头，导致 fetch/axios 请求虽返回 200 状态，但响应体被浏览器静默丢弃。
在构建全栈博客应用时，前端（如运行在 http://localhost:3000 的 React）与后端（如 http://localhost:3002 的 Express）默认属于不同源（协议、域名或端口任一不同即构成跨域）。此时即使 Express 路由逻辑正确、数据库查询成功、HTTP 状态码为 200，浏览器仍会因缺少 Access-Control-Allow-Origin 响应头而拒绝将响应数据暴露给 JavaScript，表现为 Axios.get() 成功回调中 data.data 为空或根本未进入 .then()，最终 postList 保持初始空数组，map() 渲染无内容。
✅ 正确解决方案是在 Express 后端全局启用 CORS 支持。推荐使用官方中间件 cors（更健壮、支持细粒度配置），也可手动设置响应头：
方式一（推荐）：使用 cors 中间件
npm install cors
const cors = require('cors');
// 在 app.use() 链中尽早注册（通常在路由前）
app.use(cors({
origin: 'http://localhost:3000', // 仅允许指定前端源
credentials: true // 如需携带 Cookie 或认证头，需同时设为 true
}));方式二（手动配置）：添加自定义中间件
立即学习“前端免费学习笔记（深入）”；
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
res.header('Access-Control-Allow-Credentials', 'true'); // 若需认证
// 处理预检请求（OPTIONS）
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});⚠️ 注意事项：
- 顺序关键：CORS 中间件必须在 app.use() 中置于所有路由定义（如 app.get("/api/get", ...)）之前；
- 开发 vs 生产：开发阶段可设为 origin: '*'，但生产环境务必明确指定可信域名，避免安全风险；
- 错误排查技巧：打开浏览器开发者工具 → Network 标签页 → 点击 /api/get 请求 → 查看 Response Headers 是否包含 Access-Control-Allow-Origin；若缺失，即确认为 CORS 问题；
- 前端无需修改：Axios 和 useEffect 代码本身无误，无需调整；确保 console.log(data) 在 .then() 中能打印出完整响应对象（含 data 字段），是验证修复成功的直接依据。
完成配置后重启 Express 服务，刷新 React 页面，博客列表即可正常渲染。此问题本质是前后端通信的基础设施配置疏漏，而非业务逻辑缺陷，掌握 CORS 原理与标准配置是全栈开发者的必备基础能力。
