$ Http के लिए कोणीय IE कैशिंग मुद्दा


251

IE से भेजे गए सभी ajax कॉल कोणीय द्वारा कैश किए जाते हैं और मुझे 304 responseबाद की सभी कॉल मिलती हैं। हालांकि अनुरोध समान है, मेरे मामले में प्रतिक्रिया समान नहीं है। मैं इस कैश को अक्षम करना चाहता हूं। मैंने cache attribute$ http.get को जोड़ने की कोशिश की लेकिन फिर भी इससे कोई फायदा नहीं हुआ। इस मुद्दे को कैसे हल किया जा सकता है?

जवाबों:


439

प्रत्येक एकल 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';
}]);

78
If-Modified-Sinceहैडर बनाता है + iisnode फेंक के माध्यम से भरी हुई हर html फ़ाइल के लिए 400 गलत अनुरोध IIS ngIncludeऔर ngView। निम्नलिखित दो हेडर ने मेरे लिए समस्या तय की (हालांकि मैंने उन्हें क्रोम से खींचा, जिसमें कैशिंग मुद्दा नहीं था): $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'; $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
लैंगडन

4
मेरी राय में इस जवाब को जवाब के रूप में चिह्नित किया जाना चाहिए, जबकि मार्टिन द्वारा प्रदान किया गया समाधान काम करता है, यह एक वास्तविक फिक्स की तुलना में अधिक हैक है।
रोबा

4
यह मेरे स्थानीय जीईटी अनुरोधों के लिए काम करता है, लेकिन इससे जीईटी पद्धति के बजाय विकल्प विधि का उपयोग शुरू करने के लिए मैं जो एक कोर अनुरोध कर रहा था। 3rd पार्टी सर्वर विकल्प विधि का समर्थन नहीं करता है, इसलिए मेरा अनुरोध है कि अनुरोध करने के लिए jQuery.get () का उपयोग किया जाए और प्रतिक्रिया देने वाले हैंडलर में $ गुंजाइश.apply () का उपयोग किया जाए।
बेन

13
If-Modified-Since = "0"हेडर का उपयोग टॉमकैट (पार्सिंग हेडर तिथि के साथ समस्या, जैसा 0कि मान्य मूल्य आरएफसी नहीं है ) का उपयोग करता है। Mon, 26 Jul 1997 05:00:00 GMTइसके बजाय निश्चित मूल्य का उपयोग करना।
लोपिसन

6
मैंने "इफ़-मॉडिफ़ाइड-चूंकि" हेडर का उपयोग नहीं किया और यह बिना काम किया। बस अन्य दो आवश्यक हैं।
माइकल महोनी

69

आप या तो एक अद्वितीय क्वेरिस्ट्रिंग जोड़ सकते हैं (मेरा मानना ​​है कि यह वही है जो jQuery कैश के साथ करता है: गलत विकल्प) अनुरोध करने के लिए।

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

एक बेहतर समाधान यह है कि यदि आपके पास सर्वर तक पहुंच है, तो आप यह सुनिश्चित कर सकते हैं कि कैशिंग को रोकने के लिए आवश्यक हेडर सेट हैं। यदि आप ASP.NET MVC इस उत्तर का उपयोग कर रहे हैं तो मदद मिल सकती है।


2
$http.get(url+ "?"+new Date().toString())पैरामीटर का उपयोग किए बिना, लेकिन क्वेरी स्ट्रिंग में जोड़कर सिर्फ एक और प्रतिनिधित्व है।
दावुत गार्बुज़

28

आप एक इंटरसेप्टर जोड़ सकते हैं।

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;
               }
           };
    });

आपको सत्यापन के बाद कंसोल.लॉग लाइनों को हटा देना चाहिए।


और $logयदि आप उन्हें बाहर ले जाना भूल जाते हैं, तो आपको उनका उपयोग करना चाहिए ।
कार्ल जी

2
मुझे IE में गंभीर कैशिंग समस्याएं हैं, जो एक खाली पृष्ठ की ओर ले जाती है, क्योंकि महत्वपूर्ण भागों ने निष्पादित नहीं किया। प्रॉप्सड इंटरसेप्टर के उपयोग से इस समस्या का समाधान हो गया! +1
raoulinski

मुझे लगता है कि यह सबसे अच्छा तरीका है, क्योंकि यह कॉर्स और IE के व्यवहार से मुद्दों को टाल देता है, यदि आप अतिरिक्त हेडर जोड़ते हैं तो प्रीफलाइट अनुरोध को ट्रिगर करने का व्यवहार। यह अतिरिक्त समस्याओं में नहीं चलने के लिए सबसे सुरक्षित तरीका लगता है
क्रिस्मार्क्स

@dilip pattnaik: - यह मुद्दा कोणीय और अर्थात के साथ क्यों होता है?
MiHawk

14

मैंने कोणीय परियोजना पर 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">

2
हमारे पास पहले से ही मेटा टैग थे index.htmlजब हमने देखा कि IE11 AJAX अनुरोधों को कैशिंग कर रहा था: / लेकिन कॉन्फ़िगर करना $httpProviderजैसा कि अन्य उत्तरों में दिखाया गया है ठीक काम किया।
Walen

14

डुप्लिकेट एक और धागा में मेरा उत्तर

के लिए कोणीय 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 }
    ]
})

क्या वे सर्वर प्रतिक्रिया के लिए हेडर नहीं होंगे, ब्राउज़र अनुरोध के लिए नहीं? (मैं कल्पना कर सकता हूँ कि कोई If-Modified-Sinceउपरोक्त विधि का उपयोग करके अतीत में कुछ तारीख के साथ सेट कर सकता है ।)
अर्जन

@Vitaliy: - यह मुद्दा कोणीय और अर्थात के साथ क्यों होता है?
MiHawk

आपका दृष्टिकोण किसी भी कस्टम हेडर को हटा देगा जो पहले से ही हैं। इसलिए नया हैडर ऑब्जेक्ट बनाने के बजाय निम्नलिखित कार्य करें। headers: req.headers .set('Cache-Control', 'no-cache') .set('Pragma', 'no-cache') .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')
चामिका गोनेटिलाका

9

गारंटी है कि मैं काम कर रहा था इन लाइनों के साथ कुछ था:

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विभिन्न मामलों के लिए यह काम करने के लिए।


क्या आप मुझे बता सकते हैं कि कोड में आपने कोणीय फ़ाइल में कहां जोड़ा है? क्या लाइन #?
JonathanScialpi

@JonathanScialpi मैंने इसे यह दिखाने के लिए अद्यतन किया कि मैं इसे कहाँ रख सकता हूँ। जहां यह अनाम फ़ंक्शन के भीतर है वह मायने नहीं रखता।
markyzm

@marksyzm u plzz मुझे बता सकते हैं कि इस पंक्ति का क्या अर्थ हैif (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.common = {}; }
मोनोजित सरकार

@MonojitSarkar आह, कि अगर हेडर होना चाहिए था। अगर बयान में, उस सूचक के लिए धन्यवाद
अंक

1
["If-Modified-Since"] = "0"अवैध है और कुछ बैक एंड पर खराब अनुरोध उत्पन्न करता है। यह एक तारीख होनी चाहिए।
जेन्सन-बटन-घटना

8

इस एकमात्र रेखा ने मेरी मदद की (कोणीय 1.4.8):

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

UPD: समस्या IE11 आक्रामक कैशिंग करती है। जब मैं फ़िडलर में देख रहा था तो मैंने देखा कि F12 मोड में अनुरोध "प्राग्मा = नो-कैश" भेज रहे हैं और जब भी मैं किसी पृष्ठ पर जाता हूं, तो समापन बिंदु का अनुरोध किया जाता है। लेकिन सामान्य मोड में समापन बिंदु पर केवल एक बार अनुरोध किया गया था जब मैं पृष्ठ पर गया था।


1
सिर्फ FYI करें, इस जवाब के कारण एक CORS समस्या उत्पन्न हुई जब Azure के ब्लॉब स्टोरेज से फ़ाइलों का अनुरोध करना, नीचे ट्रैक करना मुश्किल था लेकिन अंततः यह पता लगा लिया कि यह कारण था। प्रैगमा हैडर को हटाकर मेरे कोर इश्यू (लेकिन IE कैशिंग इश्यू को फिर से इंस्टाल किया गया) को हटा दिया गया।
कीथल ke०४१ १६

7

कैशिंग से बचने के लिए, एक विकल्प एक ही संसाधन या डेटा के लिए अलग URL देना है। विभिन्न URL उत्पन्न करने के लिए, आप URL के अंत में एक यादृच्छिक क्वेरी स्ट्रिंग जोड़ सकते हैं। यह तकनीक JQuery, कोणीय या अन्य प्रकार के अजाक्स अनुरोधों के लिए काम करती है।

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

6

मुझे इसे एक यादृच्छिक संख्या के रूप में आकर्षक डेटटाइम हल करना है:

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

: - यह मुद्दा कोणीय और अर्थात के साथ क्यों होता है?
MiHawk

4

ऊपर दिया गया समाधान काम करेगा (एक नए परम में क्वेरिस्ट्रिंग में जोड़कर url को अद्वितीय बनाएं) लेकिन मैं इस प्रस्ताव को पसंद करता हूं [यहां]: AngularJS में IE कैश को रोकने के लिए बेहतर तरीका?, जो सर्वर स्तर पर इसे संभालता है क्योंकि यह IE के लिए विशिष्ट नहीं है। मेरा मतलब है, अगर उस संसाधन को कैश नहीं किया जाना चाहिए, तो इसे सर्वर पर करें (यह ब्राउज़र के साथ कुछ नहीं करना है, इसलिए यह संसाधन के लिए महत्वपूर्ण है)।

JAX-RS के साथ जावा में उदाहरण के लिए, इसे JAX-RS v1 या घोषित रूप से प्रोग्राम के लिए करें JAX-RS v2 के लिए ।

मुझे यकीन है कि कोई भी यह पता लगाएगा कि यह कैसे करना है


1
यद्यपि इसे विस्तृत किया जा सकता है, लेकिन यह इसे करने का उचित तरीका है। ग्राहक पक्ष को यह नहीं चुनना चाहिए कि कैश क्या करना चाहिए या नहीं, लेकिन यह वह सर्वर होना चाहिए जो क्लाइंट को यह बताए कि कैश किया जाना चाहिए या नहीं।
आर्किमिडीज ट्रेजानो

मैं पूरी तरह सहमत हूं, यह एक उचित तरीका होना चाहिए
smnbbrv

1

यह थोड़ा पुराना है लेकिन: जैसे समाधान अप्रचलित है। सर्वर को कैश को हैंडल करें या कैश नहीं करें (प्रतिक्रिया में)। कोई कैशिंग (उत्पादन में नए संस्करणों के बारे में सोच) की गारंटी देने का एकमात्र तरीका एक संस्करण संख्या के साथ js या css फ़ाइल को बदलना है। मैं वेबपैक के साथ ऐसा करता हूं।


1

उदाहरण के लिए हेडर सेट करने के लिए भी आप अपने सर्व में कोशिश कर सकते हैं:

...
"@ कोणीय / कोर" से आयात {इंजेक्शन};
"@ कोणीय / आम / http" से {HttpClient, HttpHeaders, HttpParams} आयात करें;
...
 @Injectable ()
निर्यात वर्ग MyService {

    निजी हेडर: HttpHeaders;


    निर्माता (निजी http: HttpClient ..) 
    {


        this.headers = नए HttpHeaders ()
                    .append ("सामग्री-प्रकार", "आवेदन / json")
                    .append ("स्वीकार करें", "आवेदन / json")
                    .append ("LanguageCulture", यह। हेडरंग)
                    .append ("कैश-कंट्रोल", "नो-कैश")
                    .append ("प्राग्मा", "नो-कैश")                   
    }
}
....


0

यह समस्या IE कैशिंग समस्या के कारण है जैसा कि आपने कहा था, आप F12 दबाकर IE डिबग मोड में इसका परीक्षण कर सकते हैं (यह डिबग मोड में ठीक काम करेगा)। जब पृष्ठ कॉल होता है, तो प्रत्येक बार सर्वर डेटा नहीं लेगा। कैश से डेटा। इसे अक्षम करने के लिए निम्न में से कोई एक कार्य करें:

  1. अपने http सेवा अनुरोध यूआरएल के साथ निम्नलिखित संलग्न करें

// इससे पहले (जारी एक)

this.httpService.get (यह। serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + सगाईनाम, {})

// (ठीक काम करने के बाद)

this.httpService.get (यह। serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + सगाई नाम + "? DateTime =" + new Date ()। getTime () + '', {cache: false})

  1. पूरे मॉड्यूल के लिए कैश अक्षम करें: -

$ httpProvider.defaults.headers.common ['प्रग्मा'] = 'नो-कैश';


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

मैंने इसे केवल व्यू में जोड़ा और यह IE पर काम करना शुरू कर दिया। कोणीय 2 पर काम करने की पुष्टि की।


0

एक विकल्प यह है कि प्रत्येक अनुरोध के साथ टाइमस्टैम्प को जोड़ने के सरल दृष्टिकोण का उपयोग करें और कैश को साफ करने की आवश्यकता नहीं है।

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

-2

यह कोशिश करो, यह मेरे लिए एक समान मामले में काम किया: -

$http.get("your api url", {
headers: {
    'If-Modified-Since': '0',
    "Pragma": "no-cache",
    "Expires": -1,
    "Cache-Control": "no-cache, no-store, must-revalidate"
 }
})
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.