我在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
您可以尝试添加“Pragma”标头:
headers: { Pragma: 'no-cache'}
这里也提到:Axios only called once inside self-invoking function (Internet Explorer)
来自docs
在http请求中检查此标头:
缓存控制:
no-cache
:强制缓存在发布缓存副本之前将请求提交给源服务器进行验证
no-store
:缓存不应存储有关客户端请求或服务器响应的任何内容。
must-revalidate
(Revalidation and reloading
):
缓存必须在使用之前验证过时资源的状态,并且不应使用过期的资源
Expires
:0 - 资源已经过期
我刚遇到同样的问题,IE11只是忽略了对后端服务器的get请求。我发现修复的快速方法是使用get请求传递一个不必要的param,在我们的例子中是一个时间戳。
const t = Date.now();
axios.get(`${API_DOMAIN}/api/bookingep/find?c=${t}`);
因为每次时间戳不同,ie11会按预期发送get请求。
如果客户端解决方案不能作为最后的手段,您可以尝试在服务器端设置标头。如果您使用的是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的解决方案的想法