MEVN栈Vue从MongoDB取数遇404、CORS及Node.js错误求助

1. Vue组件axios请求'/shoppinglistitems'出现404错误 #

• 检查前端代理配置：确保vue.config.js中配置了正确的代理规则，将前端请求转发到后端服务。示例配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

前端请求时需使用/api/shoppinglistitems，代理会自动转发到后端的/shoppinglistitems路由。

• 验证后端路由：检查server.js中是否正确定义了对应路由，比如：

app.get('/shoppinglistitems', (req, res) => {
  // 处理逻辑
});

确保路由路径拼写一致，HTTP方法（GET/POST等）与前端请求匹配。

2. 直接请求后端地址触发CORS问题 #

• 在Express后端安装并启用cors中间件：
  1. 安装依赖：npm install cors
  2. 在server.js中配置：

const cors = require('cors');
// 允许所有跨域请求（开发环境可用）
app.use(cors());

// 生产环境建议限制源地址
// app.use(cors({
//   origin: 'http://your-frontend-domain.com',
//   credentials: true
// }));

3. 使用fetch请求后后端出现ERR_HTTP_HEADERS_SENT错误 #

• 该错误是由于单次请求中多次发送响应导致的，需检查后端路由处理逻辑：
  • 错误示例（多次响应）：

app.get('/shoppinglistitems', (req, res) => {
  Item.find({}, (err, items) => {
    if (err) res.send(err);
    res.json(items); // 无论是否报错都会执行，触发重复响应
  });
});

• 正确写法（确保单次请求仅发送一次响应）：

app.get('/shoppinglistitems', (req, res) => {
  Item.find({}, (err, items) => {
    if (err) {
      return res.status(500).send(err); // return终止后续代码执行
    }
    res.json(items);
  });
});

• 推荐使用async/await简化异步处理，避免回调嵌套导致的逻辑混乱：

app.get('/shoppinglistitems', async (req, res) => {
  try {
    const items = await Item.find({});
    res.json(items);
  } catch (err) {
    res.status(500).send(err);
  }
});

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