ReactJS：IE11沒有使用緩存數據發出新的HTTP請求

Question

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

Answer 1

您可以嘗試添加“Pragma”標頭：

headers: { Pragma: 'no-cache'}

這里也提到： Axios只在內部自調用函數中調用一次（Internet Explorer）

Answer 2

來自docs

在http請求中檢查此標頭：

緩存控制：

no-cache ：強制緩存在發布緩存副本之前將請求提交給源服務器進行驗證

no-store ：緩存不應存儲有關客戶端請求或服務器響應的任何內容。

must-revalidate （ Revalidation and reloading ）：

緩存必須在使用之前驗證過時資源的狀態，並且不應使用過期的資源

Expires ：0 - 資源已過期

Answer 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'))

來自鏈接的解決方案的想法

Answer 4

我剛遇到同樣的問題，IE11只是忽略了對后端服務器的get請求。 我發現修復的快速方法是使用get請求傳遞一個不必要的param，在我們的例子中是一個時間戳。

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

因為每次時間戳不同，ie11會按預期發送get請求。