axios发get请求在XHR里没有显示

能得到数据,但是在network里的XHR里找不到get请求

img

img

可能是因为浏览器在发送该请求时使用了 HTTP 缓存。

HTTP 缓存是一种在客户端保存最近请求过的资源的机制,旨在提高页面加载速度和减少对服务器的请求次数。如果浏览器缓存了 GET 请求的响应,它将从缓存中返回该响应,而不会发送新的请求。这种情况下,就不会在 Network 标签下看到该请求。

可以通过以下几种方式解决该问题:
3.在请求时使用随机的查询参数:在发送 GET 请求时,可以添加随机的查询参数,以便每次请求都是唯一的。例如,可以在请求 URL 后面添加类似于“?t=12345”的参数,其中“12345”是当前的时间戳或随机数,这将强制浏览器
2.禁用 HTTP 缓存:在请求头中添加“Cache-Control: no-cache”和“Pragma: no-cache”两个字段,这将通知浏览器不要缓存该请求的响应。例如:

axios.get('/api/data', {
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  }
});

3.在 Chrome 的开发者工具中禁用缓存:在 Network 标签下,可以勾选“禁用缓存”选项,这将禁用浏览器缓存

如果您使用axios发出了一个GET请求,并且能够成功地获取到数据,但是在浏览器的开发者工具的网络面板中却没有看到这个请求,可能是由于浏览器缓存或者代理服务器的缓存导致的。

浏览器缓存通常会缓存GET请求的结果,以便在下一次相同的请求时可以快速地返回结果。如果您多次发送相同的GET请求,浏览器可能会从缓存中返回结果,而不会实际发送请求。您可以在axios请求中添加一个随机的查询参数来强制浏览器发送一个新的请求,例如:


axios.get('/api/data', { params: { _cacheBust: Date.now() } });

另一个可能的原因是代理服务器缓存了GET请求的结果。如果您的请求被代理服务器缓存了,那么您在浏览器的开发者工具的网络面板中将看不到这个请求。如果您不希望请求被代理服务器缓存,您可以在请求头中添加一个"Cache-Control"字段,告诉代理服务器不要缓存这个请求。例如:


axios.get('/api/data', { headers: { 'Cache-Control': 'no-cache' } });

如果以上方法都没有解决您的问题,那么可能是您的代码或者服务器端的问题。建议您检查代码逻辑是否正确,并确保服务器端已经正确地处理了您的请求。