$ httpのAngular IE Cachingの問題

IEから送信されたすべてのajax呼び出しはAngularによってキャッシュされ304 response、その後のすべての呼び出しに対してを取得します。リクエストは同じですが、私の場合、レスポンスは同じではありません。このキャッシュを無効にしたい。cache attribute$ http.getにを追加してみましたが、それでも役に立ちませんでした。この問題はどのように解決できますか？

単一のGET要求ごとにキャッシュを無効にする代わりに、$ httpProviderでグローバルに無効にします。

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

リクエストに一意のクエリ文字列（jQueryがcache：falseオプションを使用して行うことだと思います）をリクエストに追加することもできます。

$http({
    url: '...',
    params: { 'foobar': new Date().getTime() }
})

おそらくより良い解決策は、サーバーにアクセスできる場合、キャッシュを防ぐために必要なヘッダーが設定されていることを確認することです。ASP.NET MVC この答えを使用している場合は役立つかもしれません。

インターセプターを追加できます。

myModule.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.push('noCacheInterceptor');
}]).factory('noCacheInterceptor', function () {
            return {
                request: function (config) {
                    console.log(config.method);
                    console.log(config.url);
                    if(config.method=='GET'){
                        var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                        config.url = config.url+separator+'noCache=' + new Date().getTime();
                    }
                    console.log(config.method);
                    console.log(config.url);
                    return config;
               }
           };
    });

確認後、console.log行を削除する必要があります。

角度のあるプロジェクトでindex.htmlに3つのメタタグを追加するだけで、IEでキャッシュの問題が解決しました。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">

別のスレッドで私の回答を複製しています。

以下のための角度2以降、追加する最も簡単な方法no-cacheオーバーライドすることで、ヘッダをRequestOptions：

import { Injectable } from '@angular/core';
import { BaseRequestOptions, Headers } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    headers = new Headers({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    });
}

そしてあなたのモジュールでそれを参照してください：

@NgModule({
    ...
    providers: [
        ...
        { provide: RequestOptions, useClass: CustomRequestOptions }
    ]
})

私が働いていた保証されたものはこれらの線に沿ったものでした：

myModule.config(['$httpProvider', function($httpProvider) {
    if (!$httpProvider.defaults.headers.common) {
        $httpProvider.defaults.headers.common = {};
    }
    $httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
    $httpProvider.defaults.headers.common.Pragma = "no-cache";
    $httpProvider.defaults.headers.common["If-Modified-Since"] = "Mon, 26 Jul 1997 05:00:00 GMT";
}]);

私はすべてのメソッドの正しい使用法を保証するために、上記のソリューションの2をマージしなければならなかったが、あなたは置き換えることができcommonてget、または他の方法、すなわちput、post、delete異なるケースのためにこの仕事をするために。

この唯一の行は私を助けました（Angular 1.4.8）：

$httpProvider.defaults.headers.common['Pragma'] = 'no-cache';

UPD：問題はIE11が積極的なキャッシングを行うことです。Fiddlerを調べたところ、F12モードではリクエストが「Pragma = no-cache」を送信しており、ページにアクセスするたびにエンドポイントがリクエストされていることに気付きました。しかし、通常モードでは、ページにアクセスしたときにエンドポイントが最初に一度だけ要求されました。

キャッシュを回避するための1つのオプションは、同じリソースまたはデータに異なるURLを与えることです。別のURLを生成するには、ランダムなクエリ文字列をURLの最後に追加します。この手法は、JQuery、Angular、またはその他のタイプのajaxリクエストで機能します。

myURL = myURL +"?random="+new Date().getTime();

日時を乱数として追加して解決しました：

$http.get("/your_url?rnd="+new Date().getTime()).success(function(data, status, headers, config) {
    console.log('your get response is new!!!');
});

上記の解決策は機能します（クエリ文字列に新しいパラメーターを追加してURLを一意にします）。、これはIEに固有ではないため、サーバーレベルでこれを処理します。つまり、そのリソースをキャッシュしない場合は、サーバーで実行します（これは、使用するブラウザーとは関係がないため、リソースに固有です）。

Javaで例えば、JAX-RSは、それを行うと、プログラムで JAX-RSのためにv1または declativly JAX-RS v2の。

誰もがそれを行う方法を理解すると確信しています

これは少し古いものですが、次のようなソリューションは廃止されました。サーバーがキャッシュを処理するかしないかを（応答で）キャッシュします。キャッシングがないことを保証する唯一の方法（本番環境での新しいバージョンについて考える）は、jsまたはcssファイルをバージョン番号で変更することです。私はこれをwebpackで行います。

また、サービスでヘッダーを設定することもできます。例：

...
"@ angular / core"から{Injectable}をインポートします。
"@ angular / common / http"から{HttpClient、HttpHeaders、HttpParams}をインポートします。
...
 @Injectable（）
クラスMyService {

    プライベートヘッダー：HttpHeaders;


    コンストラクター（プライベートhttp：HttpClient ..） 
    {


        this.headers = new HttpHeaders（）
                    .append（ "Content-Type"、 "application / json"）
                    .append（ "承諾"、 "アプリケーション/ json"）
                    .append（ "LanguageCulture"、this.headersLanguage）
                    .append（ "Cache-Control"、 "no-cache"）
                    .append（ "プラグマ"、 "キャッシュなし"）                   
    }
}
....

正しいサーバー側のソリューション：AngularJSでIEキャッシュを防ぐためのより良い方法？

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
    // return your response
}

この問題は、あなたが言ったようにIEキャッシュの問題が原因です。f12を押すと、IEデバッグモードでテストできます（これはデバッグモードで正常に動作します）。IEは、ページが呼び出されるたびにサーバーデータを取得しません。キャッシュからのデータ。これを無効にするには、次のいずれかを実行します。

1. 以下をhttpサービスリクエストURLに追加します

//前（発行済み）

this.httpService.get（this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + engagementName、{}）

//後（正常に動作）

this.httpService.get（this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + engagementName + "？DateTime =" + new Date（）。getTime（）+ ''、{cache：false}）

2. モジュール全体のキャッシュを無効にします：-

$ httpProvider.defaults.headers.common ['Pragma'] = 'no-cache';

meta http-equiv="Cache-Control" content="no-cache"

これをViewに追加すると、IEで動作し始めました。Angular 2で動作することを確認しました。

オプションは、キャッシュをクリアする必要のないリクエストごとにタイムスタンプを追加するという単純なアプローチを使用することです。

    let c=new Date().getTime();
    $http.get('url?d='+c)

これを試してみてください、それは私にとって同様のケースでうまくいきました：-

$http.get("your api url", {
headers: {
    'If-Modified-Since': '0',
    "Pragma": "no-cache",
    "Expires": -1,
    "Cache-Control": "no-cache, no-store, must-revalidate"
 }
})