ปัญหาการแคช IE เชิงมุมสำหรับ $ http

การโทร ajax ทั้งหมดที่ส่งจาก IE จะถูกแคชโดย 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 ทำกับแคช: ตัวเลือกเท็จ) ต่อคำขอ

$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 ในโครงการเชิงมุมและปัญหาแคชถูกแก้ไขใน 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">

การทำสำเนาคำตอบของฉันในหัวข้ออื่น

สำหรับAngular 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" และมีการร้องขอจุดสิ้นสุดทุกครั้งที่ฉันเข้าชมหน้าเว็บ แต่ในปลายทางโหมดปกติถูกขอเพียงครั้งเดียวในครั้งแรกเมื่อฉันเข้าเยี่ยมชมหน้า

เพื่อหลีกเลี่ยงการแคชหนึ่งตัวเลือกคือการให้ URL ที่แตกต่างกันสำหรับทรัพยากรหรือข้อมูลเดียวกัน หากต้องการสร้าง URL ที่แตกต่างกันคุณสามารถเพิ่มสตริงการสืบค้นแบบสุ่มที่ส่วนท้ายของ URL เทคนิคนี้ใช้ได้กับคำขอ ajax ของ JQuery, Angular หรืออื่น ๆ

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

ฉันได้รับการแก้ไขต่อท้าย datetime เป็นหมายเลขสุ่ม:

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

วิธีแก้ปัญหาข้างต้นจะใช้งานได้ (ทำให้ url ไม่ซ้ำใครด้วยการเพิ่ม querystring param ใหม่) แต่ฉันชอบวิธีแก้ปัญหาที่เสนอ [ที่นี่]: วิธีที่ดีกว่าในการป้องกัน IE Cache ใน AngularJS? ซึ่งจัดการสิ่งนี้ในระดับเซิร์ฟเวอร์เนื่องจากไม่เฉพาะเจาะจงกับ IE ฉันหมายถึงถ้าทรัพยากรนั้นไม่ควรแคชให้ทำบนเซิร์ฟเวอร์ (สิ่งนี้ไม่เกี่ยวข้องกับเบราว์เซอร์ที่ใช้มันเป็นเรื่องที่น่าสนใจสำหรับทรัพยากร)

ตัวอย่างเช่นในจาวาที่มี JAX-RS ทำได้โดยทางโปรแกรมสำหรับ JAX-RS v1 หรือ declativlyสำหรับ JAX-RS v2

ฉันแน่ใจว่าทุกคนจะเข้าใจวิธีการใช้งาน

นี่เป็นเรื่องเก่าไปหน่อย แต่: โซลูชันที่ล้าสมัยแล้ว ปล่อยให้เซิร์ฟเวอร์จัดการกับแคชหรือไม่แคช (ในการตอบกลับ) วิธีเดียวที่จะรับประกันว่าไม่มีการแคช (คิดเกี่ยวกับเวอร์ชันใหม่ในการผลิต) คือการเปลี่ยนไฟล์ js หรือ css ด้วยหมายเลขเวอร์ชั่น ฉันทำสิ่งนี้กับ webpack

นอกจากนี้คุณสามารถลองใน servce ของคุณเพื่อตั้งค่าส่วนหัวเช่น:

...
นำเข้า {Injectable} จาก "@ angular / core";
นำเข้า {HttpClient, HttpHeaders, HttpParams} จาก "@ angular / common / http";
...
 @Injectable ()
ส่งออกระดับ MyService {

    ส่วนหัวส่วนตัว: HttpHeaders;


    ตัวสร้าง (ส่วนตัว http: HttpClient .. ) 
    {


        this.headers = ใหม่ HttpHeaders ()
                    .append ("ประเภทเนื้อหา", "แอปพลิเคชัน / json")
                    .append ("ยอมรับ", "แอปพลิเคชัน / json")
                    .append ("LanguageCulture", this.headersLanguage)
                    .append ("การควบคุมแคช", "ไม่มีแคช")
                    .append ("Pragma", "no-cache")                   
    }
}
....

วิธีแก้ไขที่ถูกต้องฝั่งเซิร์ฟเวอร์: วิธีที่ดีกว่าในการป้องกัน IE Cache ใน AngularJS?

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

ปัญหานี้เกิดจากปัญหาการแคช IE อย่างที่คุณบอกคุณสามารถทดสอบในโหมดการดีบัก IE ได้โดยการกด f12 (ซึ่งจะทำงานได้ดีในโหมดดีบัก) IE จะไม่ใช้ข้อมูลเซิร์ฟเวอร์ในแต่ละครั้งที่มีการเรียกหน้าเว็บ ข้อมูลจากแคช หากต้องการปิดใช้งานให้ทำอย่างใดอย่างหนึ่งต่อไปนี้:

1. ผนวกข้อมูลต่อไปนี้ด้วย URL คำขอบริการ http ของคุณ

// ก่อนหน้า (ออกครั้งเดียว)

this.httpService.get (this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + engagementName, {})

// หลังจาก (ทำงานได้ดี)

this.httpService.get (this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + EngagementName + "? DateTime =" + วันที่ใหม่ (). getTime () + '', {แคช: false})

2. ปิดการใช้งานแคชสำหรับโมดูลทั้งหมด: -

$ httpProvider.defaults.headers.common ['Pragma'] = 'ไม่มีแคช';

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

ฉันเพิ่งเพิ่มสิ่งนี้ลงในมุมมองและเริ่มทำงานกับ 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"
 }
})