Reactjs Fetch调用Express GET接口遇CORS错误及大数据查询超时求解决

你的问题核心是大体积数据查询耗时过长导致浏览器触发CORS错误（其他接口数据量小，服务器能快速返回带CORS头的响应），结合你的代码和场景，给出以下具体解决办法：

1. 全局确保CORS响应头正确设置 #

其他接口正常是因为数据量小，服务器能及时返回并带上CORS头；而GET接口处理慢，可能在响应中断前没来得及设置头，导致浏览器报错。

• 用中间件统一设置CORS头（推荐）：
  在API入口文件（比如app.js）中添加全局CORS中间件，确保所有请求（包括超时/错误场景）都能获取到CORS头：

  app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'xxxxx'); // 替换为你的前端域名，生产环境不建议用*
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  

• 手动在getProducts接口中提前设置头：
  如果不想用全局中间件，在查询前就设置好CORS头，避免处理慢导致头未设置：

  export const getProducts = (req, res) => {
    // 提前设置CORS头
    res.setHeader('Access-Control-Allow-Origin', 'xxxxx');
    const q = "SELECT * FROM product";
  
    db.query(q,(err,data)=>{
        if(err) return res.json(err);
        return res.json(data);
    });
  };
  

2. 优化数据查询，减少返回体积 #

244MB的一次性响应完全没必要，前端根本无法高效处理这么大的数据，这也是导致耗时过长的核心原因：

• 分页查询：只返回当前页的数据，前端通过页码/每页条数请求：
  修改SQL为分页查询（MySQL用LIMIT）：

  export const getProducts = (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'xxxxx');
    // 从请求参数获取页码和每页数量，默认第一页，每页10条
    const page = parseInt(req.query.page) || 1;
    const pageSize = parseInt(req.query.pageSize) || 10;
    const offset = (page - 1) * pageSize;
    const q = "SELECT * FROM product LIMIT ?, ?";
  
    db.query(q, [offset, pageSize], (err,data)=>{
        if(err) return res.json(err);
        // 同时返回总条数，方便前端做分页控件
        db.query("SELECT COUNT(*) AS total FROM product", (countErr, countData) => {
            if(countErr) return res.json(countErr);
            return res.json({
                list: data,
                total: countData[0].total
            });
        });
    });
  };
  

• 只返回需要的字段：不要用SELECT *，明确列出前端需要的字段，大幅减少数据体积：

  // 比如只返回id、name、price、description
  const q = "SELECT id, name, price, description FROM product";
  

• 添加条件过滤：允许前端通过参数筛选数据（比如分类、价格区间），进一步减少返回量：

  const category = req.query.category;
  let q = "SELECT id, name, price, description FROM product";
  if(category) {
      q += " WHERE category = ?";
  }
  db.query(q, category ? [category] : [], (err,data)=>{...});
  

3. 优化数据库查询性能 #

• 给product表的常用查询字段添加索引，比如如果经常按分类查询，就给category字段加索引：

  CREATE INDEX idx_product_category ON product(category);
  

• 避免SELECT *，减少数据库IO和数据传输量，这也是提升查询速度的关键。

4. 设置请求超时处理 #

在数据库查询和服务器响应中设置合理的超时时间，避免请求长时间挂起，同时确保超时情况下也返回带CORS头的错误响应：

export const getProducts = (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'xxxxx');
    // 设置响应超时时间，比如30秒
    req.setTimeout(30000, () => {
        res.status(408).json({ error: "请求超时，请尝试缩小查询范围" });
    });

    const q = "SELECT id, name, price, description FROM product";
    db.query(q,(err,data)=>{
        if(err) return res.status(500).json(err);
        return res.json(data);
    });
};

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