web-dev-qa-db-ja.com

ReactJS：キャッシュされたデータを使用して、IE11が新しいHTTPリクエストを作成しない

私のReact上のアプリケーションで問題に直面していますIE11ここで、UIは新しいリクエストごとにバックエンドサービスにアクセスせず、キャッシュデータから応答を返していません。アプリケーションはChromeで正常に動作します。

IEの場合、サービスは200ではなく304のコードで終了します。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

reactjshttpinternet-explorerinternet-explorer-11cache-control
8
Vishal Gulati

「プラグマ」ヘッダーを追加してみてください：

headers: { Pragma: 'no-cache'}

ここでも言及： Axiosは自己起動関数内で1回だけ呼び出されます（Internet Explorer）

24
Daniel Andrei

から docs

Httpリクエストでこのヘッダーを確認します。

キャッシュ制御：

no-cache：キャッシュされたコピーを解放する前に、検証のためにキャッシュを強制的にオリジンサーバーに送信します

no-store：キャッシュは、クライアント要求またはサーバー応答について何も格納してはなりません。

must-revalidate（Revalidation and reloading）：

キャッシュは、使用する前に失効したリソースのステータスを確認する必要があり、期限切れのリソースは使用しないでください。

Expires：0-リソースはすでに期限切れです

1
RIYAJ KHAN

クライアント側のソリューションが最後の手段として機能しない場合は、サーバー側でヘッダーを設定してみてください。 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 からの解決策のアイデア

1
xab

IE11がバックエンドサーバーへのgetリクエストを単に無視するという同じ問題に遭遇しました。私が見つけた簡単な方法は、getリクエストで不要なパラメーターを1つ渡すことです。この場合はタイムスタンプです。

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

タイムスタンプが異なるたびに、ie11は期待どおりにgetリクエストを送信します。

1
Isaac Guan