React Native中Fetch请求返回304错误，无法获取MongoDB数据求助

核心原因 #

HTTP 304表示资源未修改，客户端会复用本地缓存的响应，而不会加载后端最新数据，常见触发场景：

• 后端接口返回了304 Not Modified状态码，匹配了客户端携带的缓存校验标识（If-None-Match/If-Modified-Since）
• React Native默认启用了HTTP缓存策略，未强制刷新请求
• 后端的缓存标识生成逻辑异常，数据更新时未同步更新缓存标识

后端(Node.js + MongoDB)解决措施 #

1. 禁用目标接口缓存 #

在返回交易数据的接口中，直接设置响应头强制禁用缓存：

// Express 示例接口
app.get('/api/transactions', async (req, res) => {
  try {
    const transactions = await Transaction.find();
    // 设置缓存控制头，禁止客户端缓存
    res.set({
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    });
    res.json(transactions);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

2. 校验缓存标识逻辑 #

如果后端启用了ETag或Last-Modified机制，需确保数据变更时标识同步更新：

• 给MongoDB的交易文档添加updatedAt字段，数据修改时自动更新该字段
• 接口返回时，将Last-Modified设置为文档的updatedAt值，确保数据变化时缓存标识失效

前端(React Native)解决措施 #

1. 强制请求跳过缓存 #

在GET请求中添加缓存控制头，或通过URL参数绕过缓存：

// fetch 示例
fetch('https://your-api-domain/api/transactions', {
  method: 'GET',
  headers: {
    'Cache-Control': 'no-cache'
  }
})
.then(res => {
  // 若仍返回304，手动发起带时间戳的请求
  if (res.status === 304) {
    return fetch(`https://your-api-domain/api/transactions?t=${Date.now()}`);
  }
  return res.json();
})
.then(data => {
  // 处理交易数据
})
.catch(err => console.error(err));

2. Axios 请求配置 #

使用Axios时，可通过请求头或参数强制刷新：

import axios from 'axios';

axios.get('/api/transactions', {
  headers: { 'Cache-Control': 'no-cache' },
  params: { t: Date.now() } // 时间戳参数确保URL唯一
})
.then(response => {
  // 处理返回数据
})
.catch(error => console.error(error));

排查验证步骤 #

• 打开React Native调试工具的网络面板，查看请求头的If-None-Match/If-Modified-Since和响应头的ETag/Last-Modified是否匹配
• 直接在浏览器中访问API接口，确认是否能获取最新数据，排除后端数据未更新的问题
• 检查MongoDB中的交易数据，确认数据确实存在且已更新，排查后端查询逻辑是否正确

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