AngularJS网站因反向代理会话过期引发报错的优雅修复方案咨询

针对会话过期后，AngularJS请求资源返回登录HTML引发语法错误、页面黑屏的问题，以下是几个实用的解决思路：

1. 用HTTP拦截器统一处理异常响应 #

AngularJS的$httpInterceptor可以拦截所有请求和响应，我们可以在响应拦截逻辑里检测返回内容是否为登录页HTML，一旦识别就直接重定向到登录页或刷新页面，避免错误扩散。

示例代码：

angular.module('yourApp')
.factory('sessionExpiryInterceptor', ['$q', '$window', function($q, $window) {
    return {
        // 拦截所有成功响应
        response: function(response) {
            if (typeof response.data === 'string' && response.data.startsWith('<!DOCTYPE html>')) {
                $window.location.href = '/';
                return $q.reject('会话已过期');
            }
            return response;
        },
        // 拦截错误响应
        responseError: function(rejection) {
            if (rejection.data && typeof rejection.data === 'string' && rejection.data.startsWith('<!DOCTYPE html>')) {
                $window.location.href = '/';
            }
            return $q.reject(rejection);
        }
    };
}])
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('sessionExpiryInterceptor');
}]);

2. 反向代理层调整：静态资源请求返回401而非HTML #

修改反向代理配置，让会话过期时，对JS、CSS等静态资源的请求返回401 Unauthorized状态码，而非直接返回登录页HTML。这样前端可以通过拦截401状态码统一处理跳转，从根源避免HTML被当作JS解析的问题。

以Nginx为例，配置示例：

location /app/ {
    proxy_pass http://your-angular-server;
    auth_request /auth;
    # 会话过期时返回401，而非跳转HTML
    error_page 401 = @session_expired;
}

location @session_expired {
    return 401 '会话已过期';
}

3. 全局捕获语法错误做兜底 #

如果前面的拦截有遗漏，可以在全局层面捕获expected expression, got '<'这类特定错误，给用户明确提示并提供刷新选项：

window.addEventListener('error', function(event) {
    if (event.message.includes("expected expression, got '<'")) {
        if (confirm('会话已过期，页面无法正常加载。点击确定刷新页面重新登录？')) {
            window.location.reload();
        }
    }
});

4. 主动心跳检测会话状态 #

定期发送轻量级的心跳请求（比如每10-15分钟一次），提前检测会话是否有效。如果发现会话过期，主动提示用户或跳转，避免用户操作时才触发错误：

angular.module('yourApp')
.run(['$interval', '$http', '$window', function($interval, $http, $window) {
    const heartbeatInterval = 12 * 60 * 1000;
    $interval(function() {
        $http.get('/api/verify-session')
        .catch(function(res) {
            if (res.status === 401 || (res.data && res.data.startsWith('<!DOCTYPE html>'))) {
                alert('你的会话已过期，请重新登录');
                $window.location.href = '/';
            }
        });
    }, heartbeatInterval);
}]);

内容的提问来源于stack exchange，提问作者madgangmixers