前端API请求未触发数据为空，配置CORS后仍挂起求助

架构老林

2026-7-11

问题排查：请求挂起且Vite代理+CORS配置无效

以下是几个可能导致请求挂起、无日志输出的原因及排查方案：

请求路径未匹配代理规则，直接发起跨域请求
你的请求代码中使用了${server_path}${api_path}/person的拼接方式，如果server_path是完整的服务器地址（比如http://localhost:4999），请求会直接发往目标服务器，完全绕过Vite代理，自然触发CORS问题。
解决：将server_path设为空字符串，确保请求路径以/api开头（与代理配置匹配），示例：
```
// 修改请求路径，去掉server_path，确保以/api开头
const response = await axios.get(`${api_path}/person`);
// 确保api_path的值是"/api"，最终请求路径为"/api/person"
```
Vite代理配置未生效
修改vite.config.js后必须重启Vite开发服务器，否则新的代理规则不会加载。很多开发者容易忽略这一点，导致配置看似正确但实际未生效。
解决：停止当前Vite服务，重新执行npm run dev启动。
服务端CORS中间件位置错误
app.use(cors())必须在所有路由定义、其他中间件（如express.json()）之前注册，否则路由请求不会经过CORS中间件处理，导致OPTIONS预检请求失败，请求挂起。
解决：调整服务端代码顺序，确保CORS中间件是第一个被挂载的：
```
const express = require('express');
const cors = require('cors');
const app = express();

// 先注册CORS中间件
app.use(cors());
// 再注册其他中间件和路由
app.use(express.json());
app.use('/api', require('./routes'));
```
代理目标地址或端口错误
确认服务端实际运行的端口是4999，如果服务端跑在其他端口（比如3000），代理目标地址错误会导致请求发往无效地址，长时间挂起。
解决：直接在浏览器地址栏访问http://localhost:4999/api/person，确认服务端能正常返回数据，验证地址和端口正确性。
串行请求导致阻塞
当前fetchData中是先await getBeersData()完成后才执行getPersonsData()，如果第一个请求挂起，第二个请求永远不会启动，因此getPersonsData中的日志不会输出。
解决：改为并行请求，同时触发两个接口调用，方便排查哪个请求出问题：
```
const fetchData = async () => {
  try {
    // 并行执行两个请求
    const [beerRes, personRes] = await Promise.all([
      getBeersData(),
      getPersonsData()
    ]);
    setBeerData(beerRes);
    setPersonData(personRes);
  } catch (error: any) {
    console.error(error.message);
  }
};
```
axios全局配置干扰
如果项目中设置了axios全局baseURL为服务端地址，会覆盖请求路径，导致绕过Vite代理。
解决：检查是否有类似以下的全局配置，若有则移除：
```
// 移除这类全局配置，让请求走Vite代理
axios.defaults.baseURL = 'http://localhost:4999';
```

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