ReactJS：IE11 不使用缓存数据发出新的 HTTP 请求答案

【问题标题】：ReactJS: IE11 not making new HTTP request, using cached dataReactJS：IE11 不使用缓存数据发出新的 HTTP 请求
【发布时间】：2018-02-05 08:09:18
【问题描述】：

我在IE11 上的 React 应用程序中遇到问题，其中 UI 没有针对每个新请求访问后端服务并从缓存数据返回响应。该应用程序在 Chrome 上运行良好。

如果是 IE，服务以代码结束：304 而不是 200。 PFB 请求头：

Accept  application/json,*/*
Request GET /services/v0/search/?uid=12900 HTTP/1.1
Content-Type    application/json
Cache-Control   no-cache

PFB 在IE获得的响应头：

Response    HTTP/1.1 304 Not Modified
x-frame-options DENY
x-xss-protection    1; mode=block
x-content-type-options  nosniff

任何线索，IE 呈现这种行为的原因可能是什么？ TIA

【问题讨论】：

标签： reactjs http internet-explorer internet-explorer-11 cache-control

【解决方案1】：

您可以尝试添加“Pragma”标题：

headers: { Pragma: 'no-cache'}

这里也提到了：Axios only called once inside self-invoking function (Internet Explorer)

【讨论】：

非常感谢，它成功了。但是，我阅读了文档，发现编译指示仅适用于 HTTP 1.0 客户端，但根据我的请求标头，我使用的是 HTTP 1.1。那我为什么要使用 Pragma，Cache-control 应该可以的。
@Manu 我相信服务器没有正确处理缓存控制。那可能是你的问题。使用 pragma 基本上是相同的（从客户端的角度来看），因为它被用作后备。你可以在这里阅读更多，这就是我从中得到的：stackoverflow.com/questions/10314174/…

【解决方案2】：

来自docs

在您的 http 请求中检查此标头：

缓存控制：

no-cache : 强制缓存在释放缓存副本之前将请求提交给源服务器进行验证

no-store : 缓存不应存储有关客户端请求或服务器响应的任何内容。

must-revalidate (Revalidation and reloading) :

缓存在使用前必须验证陈旧资源的状态，过期的不应使用

Expires: 0 - 资源已经过期

【讨论】：

嗨，在我的请求中添加了 header('Cache-Control', 'no-cache, no-store') 但它仍然使用缓存！
请分享请求和响应头
headers: { Pragma: 'no-cache'} 应该可以工作。 Pragma 是 HTTP/1.0 实现，cache-control 是同一概念的 HTTP/1.1 实现。

【解决方案3】：

如果客户端解决方案不能作为最后的手段，您可以尝试在服务器端设置标头。如果您使用node 和express，您可以编写一个中间件，为您添加所需路由的标头，如下所示：

function cacheMiddleware(req, res, next) {
    // Should work for detecting IE8+
    if (req.headers['user-agent'].includes('Trident')) {
        res.set({
            'Cache-Control': 'no-store, no-cache, must-revalidate',
            Pragma: 'no-cache',
            Expires: new Date('01.01.2000'),
        });
    }
    next();
}

router.get('/', cacheMiddleware, (req, res) => res.send('content'))

来自link的解决方案想法

【讨论】：

谢谢！！！我从浏览器向我的 API 请求添加了 pragma no cache，但仍在获取缓存数据。将此中间件添加到我的快速服务器终于让它工作了。

【解决方案4】：

我刚刚遇到了同样的问题，IE11 只是忽略了对后端服务器的获取请求。我发现修复的快速方法是在 get 请求中传递一个不必要的参数，在我们的例子中是时间戳。

const t = Date.now(); 
axios.get(`${API_DOMAIN}/api/bookingep/find?c=${t}`);

因为每次时间戳都不一样，ie11确实会按预期发出get请求。

【讨论】：