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

8
Vishal Gulati

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

headers: { Pragma: 'no-cache'}

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

24
Daniel Andrei

から docs

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

キャッシュ制御:

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

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

must-revalidateRevalidation and reloading):

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

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

1
RIYAJ KHAN

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

1
xab

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

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

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

1
Isaac Guan