Vấn đề bộ nhớ đệm góc cạnh cho $ http

Tất cả các cuộc gọi ajax được gửi từ IE đều được Angular lưu vào bộ nhớ cache và tôi nhận được một 304 responsecuộc gọi cho tất cả các cuộc gọi tiếp theo. Mặc dù yêu cầu là như nhau, nhưng phản hồi sẽ không giống nhau trong trường hợp của tôi. Tôi muốn tắt bộ đệm này. Tôi đã thử thêm cache attribute$ http.get nhưng vẫn không được. Làm thế nào vấn đề này có thể được giải quyết?

Thay vì vô hiệu hóa bộ đệm ẩn cho mỗi yêu cầu GET, tôi vô hiệu hóa nó trên toàn cầu trong $ 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';
}]);

Bạn có thể nối thêm một chuỗi truy vấn duy nhất (tôi tin rằng đây là những gì jQuery làm với tùy chọn cache: false) cho yêu cầu.

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

Một giải pháp có lẽ tốt hơn là nếu bạn có quyền truy cập vào máy chủ, thì bạn có thể đảm bảo rằng các tiêu đề cần thiết được đặt để ngăn chặn bộ đệm. Nếu bạn đang sử dụng ASP.NET MVC câu trả lời này có thể giúp đỡ.

bạn có thể thêm một thiết bị đánh chặn.

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

bạn nên xóa các dòng console.log sau khi xác minh.

Tôi chỉ cần thêm ba thẻ meta vào index.html trong dự án góc và vấn đề bộ đệm đã được giải quyết trên 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">

Sao chép câu trả lời của tôi trong một chủ đề khác .

Đối với Angular 2 và mới hơn , cách dễ nhất để thêm no-cachetiêu đề bằng cách ghi đè 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'
    });
}

Và tham khảo nó trong mô-đun của bạn:

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

Người được bảo đảm mà tôi đã làm việc là một cái gì đó dọc theo những dòng này:

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

Tôi đã kết hợp 2 trong những giải pháp nêu trên để đảm bảo việc sử dụng đúng cho tất cả các phương pháp, nhưng bạn có thể thay thế commonbằng gethoặc phương pháp ví dụ khác put, post, deleteđể làm cho công việc này đối với trường hợp khác nhau.

Dòng này chỉ giúp tôi (Angular 1.4.8):

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

CẬP NHẬT: Vấn đề là IE11 không lưu bộ nhớ cache tích cực. Khi tôi đang tìm hiểu về Fiddler, tôi nhận thấy rằng trong các chế độ F12, các yêu cầu đang gửi "Pragma = no-cache" và điểm cuối được yêu cầu mỗi khi tôi truy cập một trang. Nhưng ở chế độ bình thường, điểm cuối chỉ được yêu cầu một lần vào lần đầu tiên khi tôi truy cập trang.

Để tránh bộ đệm, một tùy chọn là cung cấp URL khác nhau cho cùng một tài nguyên hoặc dữ liệu. Để tạo URL khác nhau, bạn có thể thêm một chuỗi truy vấn ngẫu nhiên vào cuối URL. Kỹ thuật này hoạt động cho các yêu cầu ajax kiểu JQuery, Angular hoặc loại khác.

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

Tôi nhận được nó giải quyết nối thêm datetime như một số ngẫu nhiên:

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

Giải pháp ở trên sẽ hoạt động (làm cho url duy nhất bằng cách thêm vào chuỗi truy vấn một tham số mới) nhưng tôi thích giải pháp đề xuất [ở đây]: Cách tốt hơn để ngăn chặn bộ đệm IE trong AngularJS?, xử lý việc này ở cấp máy chủ vì nó không dành riêng cho IE. Ý tôi là, nếu tài nguyên đó không nên được lưu vào bộ nhớ cache, hãy thực hiện nó trên máy chủ (điều này chẳng liên quan gì đến trình duyệt được sử dụng; nó không phù hợp với tài nguyên).

Ví dụ, trong java với JAX-RS, hãy lập trình cho JAX-RS v1 hoặc theo cách rõ ràng cho JAX-RS v2.

Tôi chắc chắn bất cứ ai cũng sẽ tìm ra cách để làm điều đó

Đây là một chút để cũ nhưng: Giải pháp như đã lỗi thời. Hãy để máy chủ xử lý bộ đệm hoặc không lưu bộ đệm (trong phản hồi). Cách duy nhất để đảm bảo không có bộ nhớ đệm (nghĩ về các phiên bản mới trong sản xuất) là thay đổi tệp js hoặc css bằng số phiên bản. Tôi làm điều này với webpack.

ngoài ra, bạn có thể thử trong dịch vụ của mình để đặt các tiêu đề như ví dụ:

...
nhập {tiêm} từ "@ angular / core";
nhập {httpClient, HttpHeaders, HttpParams} từ "@ angular / common / http";
...
 @Injectable ()
lớp xuất khẩu MyService {

    tiêu đề riêng: httpHeaders;


    hàm tạo (http riêng tư: httpClient ..) 
    {


        this .headers = new httpHeaders ()
                    .append ("Loại nội dung", "ứng dụng / json")
                    .append ("Chấp nhận", "ứng dụng / json")
                    .append ("LanguageCARM", this.headersL Language)
                    .append ("Kiểm soát bộ đệm", "không có bộ đệm")
                    .append ("Thực dụng", "không có bộ đệm")                   
    }
}
....

Giải pháp chính xác, phía máy chủ: Cách tốt hơn để ngăn chặn bộ đệm IE trong AngularJS?

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

Sự cố này là do sự cố bộ đệm IE như bạn đã nói, bạn có thể kiểm tra nó trong chế độ gỡ lỗi IE bằng cách nhấn f12 (điều này sẽ hoạt động tốt trong chế độ gỡ lỗi) .IE sẽ không lấy dữ liệu máy chủ trong mỗi lần gọi trang. dữ liệu từ bộ đệm. Để vô hiệu hóa điều này, hãy làm một trong những điều sau đây:

1. nối các phần sau với url yêu cầu dịch vụ http của bạn

// Trước (ban hành một)

this .httpService.get (this.serviceUrl + "/eAMobileService.svc/ValidateEngagmentName/" + Đính hôn, {})

// Sau (hoạt động tốt)

this.

2. vô hiệu hóa bộ đệm cho toàn bộ Mô-đun: -

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

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

Tôi vừa thêm cái này vào View và nó bắt đầu hoạt động trên IE. Xác nhận làm việc trên Angular 2.

Một tùy chọn là sử dụng cách tiếp cận đơn giản là thêm Dấu thời gian với mỗi yêu cầu không cần xóa bộ đệm.

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

Hãy thử điều này, nó đã làm việc cho tôi trong một trường hợp tương tự: -

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