4

我正在使用 angularjs 开发一个简单的用户管理系统。这是简单的添加、更新和删除应用程序。我在后端使用 spring-mvc 来获取 JSON 响应。在 Firefox、Chrome 和 Safari 中一切正常，但 IE ..!!!!

我有一页列出了所有用户。这是它第一次在 IE9/10 中正常工作，但对任何用户所做的任何更新都不会反映在视图中（使用 IE）。

我无法弄清楚发生了什么。我认为 IE9/10 也会缓存 json 数据，每次调用用户列表页面时，它都会将缓存的数据与页面绑定。

是否可以让 IE9/10 忘记那些加载的数据？

用于访问网络服务的 Angular 模块：

angular.module("user.service", ["ngResource"]).
  factory('User', function($resource, $rootScope) {
    var User = $resource(
      $rootScope.apipath + 'users/:userId', {userId: '@id'},
      {update: {method: 'PUT'}}
    );

    User.prototype.isNew = function() {
      return (typeof(this.id) === 'undefined');
    };

    return User;
});

用户列表控制器：

function UserListController($scope, User) {
    $scope.users = User.query();
}

用户列表模板：

<h2><msg key="users"></msg><a class="btn btn-primary pull-right" href="#/users/new"><i class="icon-plus-sign icon-white"></i><msg key="addnew"></msg></a></h2>

<table class="table table-striped">
    <tr>
        <th><msg key="username"></msg></th>
        <th><msg key="name"></msg></th>
        <th></th>
    </tr>
    <tr ng-repeat="user in users">

        <td>{{user.userId}}</td>
        <td>{{user.contact.firstName}} {{user.contact.lastName}}</td>
        <td>
            <div class="pull-right">
                <a class="btn btn-info" href="#/users/{{user.id}}">
                    <i class="icon-pencil icon-white"></i><msg key="edit"></msg>
                </a> 
            </div>
        </td>
    </tr>
</table>
4

2 回答 2

3

我们正在开发一个大型 AngularJs 应用程序，并且在 IE 中也遇​​到了缓存问题。最终的解决方法是将缓存控制标头添加到 api 响应消息中。

Cache-Control: no-store

另一种选择是创建一个 http 拦截器，它附加一个唯一的时间戳，因此每个请求都是不同的并且不会被缓存。

有关如何创建 http 拦截器的信息，请参阅 Jef Claes 的这篇文章。

帖子中的代码示例

var AppInfrastructure = angular.module('App.Infrastructure', []);

AppInfrastructure
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
    })    
    .factory('httpRequestInterceptorCacheBuster', function () {
        return function (promise) {
            return promise.then(function (request) {
                if (request.method === 'GET') {
                    var sep = request.url.indexOf('?') === -1 ? '?' : '&';
                    request.url = request.url + sep + 'cacheSlayer=' + new Date().getTime();
                }

                return request;
            });
        };
    });
于 2013-06-21T11:39:54.207 回答
2

谷歌搜索后，我找到了解决这个问题的方法。

出现这种情况是由于 IE 9/10 中缓存了 json。我们需要告诉 ie 不要缓存 json 数据。
作为一种解决方案，我在服务器上创建了一个 java-filter，它拦截每个来自 web 服务的请求，或者说是 json 数据。我添加了以下标题作为回应

  1. 缓存控制：无缓存
  2. Pragma : 无缓存
  3. 过期：-1

响应对象中的这些标头将告诉 IE 不要缓存随此响应接收的数据。

过滤器如下：

    public class NoCacheFilter implements Filter {

    /**
     * Place this filter into service.
     *
     * @param filterConfig the filter configuration object used by a servlet
     * container to pass information to a filter during initialization
     * @throws ServletException to inform the container to not place the filter
     * into service
     */
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    /**
     * Set cache header directives.
     *
     * @param servletRequest provides data including parameter name and values,
     * attributes, and an input stream
     * @param servletResponse assists a servlet in sending a response to the
     * client
     * @param filterChain gives a view into the invocation chain of a filtered
     * request
     */
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;

        String requestUrl = httpServletRequest.getRequestURL().toString();

        // set cache headers
        httpServletResponse.setHeader("Cache-Control", "no-cache");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", -1);

        filterChain.doFilter(servletRequest, servletResponse);
    }

    /**
     * Take this filter out of service.
     */
    public void destroy() {
    }
}
于 2014-10-10T07:12:20.740 回答