ReactJS:IE11没有使用缓存数据发出新的HTTP请求

时间:2017-08-28 05:54:14

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

我在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

4 个答案:

答案 0 :(得分:14)

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

headers: { Pragma: 'no-cache'}

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

答案 1 :(得分:1)

来自docs

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

缓存控制:

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

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

must-revalidateRevalidation and reloading):

缓存必须在使用之前验证过时资源的状态,并且不应使用过期资源

Expires: 0 - 资源已过期

答案 2 :(得分:1)

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

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

由于每次时间戳不同,ie11确实会按预期发送get请求。

答案 3 :(得分:0)

如果不得已将客户端解决方案作为最后的解决方法,则可以尝试在服务器端设置标头。 如果您使用的是nodeexpress,则可以编写一个中间件,该中间件将为您添加所需路由的标头,如下所示:

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的解决方案思想