$ http的Angular IE缓存问题

2020/10/10 01:01 · javascript ·  · 0评论

从IE发送的所有ajax调用都被Angular缓存,我304 response为随后的所有调用获取a 尽管请求是相同的,但是在我的情况下响应不会是相同的。我想禁用此缓存。我尝试将其添加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行。

我只是将三个meta标签添加到angular项目的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";
}]);

为了保证所有方法的正确使用,我不得不合并上述两种解决方案,但是您可以common使用get替换其他方法put,例如postdelete以使此方法适用于不同的情况。

这条线对我有所帮助(角度1.4.8):

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

UPD:问题是IE11进行了主动缓存。当我查看Fiddler时,我注意到在F12模式下,请求正在发送“ Pragma = no-cache”,并且每次访问页面时都请求终结点。但是在普通模式下,当我第一次访问该页面时,端点仅被请求一次。

为了避免缓存,一种选择是为相同的资源或数据提供不同的URL。要生成不同的URL,可以在URL的末尾添加一个随机查询字符串。该技术适用于JQuery,Angular或其他类型的ajax请求。

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

上面的解决方案可以工作(通过在querystring中添加新参数使URL唯一),但我更喜欢提出的解决方案[here]:防止AngularJS中的IE缓存的更好方法?,因为它不是特定于IE的,所以可以在服务器级别进行处理。我的意思是,如果不应该缓存该资源,请在服务器上进行此操作(这与所使用的浏览器无关;这对资源而言是固有的)。

例如,在具有JAX-RS的Java中,以编程方式针对JAX-RS v1或以 隐蔽方式针对JAX-RS v2进行此操作。

我敢肯定有人会想办法

这有点陈旧,但:解决方案已过时。让服务器处理缓存还是不缓存(在响应中)。保证不进行缓存(考虑生产中的新版本)的唯一方法是使用版本号更改js或css文件。我用webpack做到这一点。

您也可以尝试在servce中设置标头,例如:

...
从“ @ angular / core”导入{可注射};
从“ @ angular / common / http”导入{HttpClient,HttpHeaders,HttpParams};
...
 @Injectable()
导出类MyService {

    专用标头:HttpHeaders;


    构造函数(私有http:HttpClient ..) 
    {


        this.headers =新的HttpHeaders()
                    .append(“ Content-Type”,“ application / json”)
                    .append(“ Accept”,“ application / json”)
                    .append(“ LanguageCulture”,this.headersLanguage)
                    .append(“ Cache-Control”,“ no-cache”)
                    .append(“ Pragma”,“ no-cache”)                   
    }
}
....

正确的服务器端解决方案:防止AngularJS中IE缓存的更好方法?

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

这个问题是由于您所说的IE缓存问题引起的,您可以按f12在IE调试模式下对其进行测试(这在调试模式下可以正常工作).IE不会在每次页面调用时获取服务器数据,缓存中的数据。要禁用此功能,请执行以下任一操作:

  1. 在您的http服务请求网址后面附加以下内容

//之前(发布一个)

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

//之后(工作正常)

this.httpService.get(this.serviceUrl +“ /eAMobileService.svc/ValidateEngagmentName/” +参与名称+“?DateTime =” + new Date()。getTime()+'',{缓存:false})

  1. 禁用整个模块的缓存:

$ 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"
 }
})
本文地址:http://javascript.askforanswer.com/httpdeangular-iehuancunwenti.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!