fix(service-worker): 移除 fetch 事件拦截,修复登录失败问题

完全移除 Service Worker 的 fetch 事件监听器,解决 POST 请求被拦截导致登录超时的问题。

## 问题
- Service Worker 拦截所有同源请求,包括 POST 请求
- 非 GET 请求虽然被 return,但没有正常发送
- 导致 /api/auth/send-verification-code 等 POST 请求超时(504 Gateway Timeout)
- 本地和线上环境都无法登录

## 根本原因
Service Worker 的 fetch 事件处理器设计错误:
```javascript
if (event.request.method !== 'GET') {
    return;  //  拦截但不处理,导致请求无法发送
}
```

## 解决方案
完全移除 fetch 事件监听器,因为:
1. 通知功能不需要缓存策略
2. Service Worker 只需处理 push 和 notificationclick 事件
3. 不应该拦截任何 HTTP 请求

## 代码变更
public/service-worker.js:
- 删除整个 fetch 事件监听器(35 行代码)
- 删除 CACHE_NAME 常量(不再需要)
- 更新注释说明 Service Worker 仅用于通知功能
- 文件从 115 行减少到 80 行

## 保留的功能
-  install 事件(Service Worker 安装)
-  activate 事件(Service Worker 激活)
-  notificationclick 事件(处理通知点击)
-  notificationclose 事件(处理通知关闭)
-  push 事件(接收推送消息)

## 验证
-  npm run build 构建成功
-  Service Worker 不再拦截 HTTP 请求
-  POST 请求可以正常发送

## 回滚之前的错误修复
此 commit 回滚了之前的 commit 9de4e10 中添加的 fetch 处理器。
之前为了修复 "Failed to convert value to 'Response'" 错误而添加了 fetch 监听器,
但这个方案是错误的 - Service Worker 不应该拦截请求。
This commit is contained in:
zdl
2025-11-10 18:15:30 +08:00
parent 9de4e10637
commit 9b4fafc0b0

View File

@@ -2,10 +2,10 @@
/** /**
* Service Worker for Browser Notifications * Service Worker for Browser Notifications
* 主要功能:支持浏览器通知的稳定运行 * 主要功能:支持浏览器通知的稳定运行
*
* 注意:此 Service Worker 仅用于通知功能,不拦截任何 HTTP 请求
*/ */
const CACHE_NAME = 'valuefrontier-v1';
// Service Worker 安装事件 // Service Worker 安装事件
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
console.log('[Service Worker] Installing...'); console.log('[Service Worker] Installing...');
@@ -56,41 +56,6 @@ self.addEventListener('notificationclose', (event) => {
console.log('[Service Worker] Notification closed:', event.notification.tag); console.log('[Service Worker] Notification closed:', event.notification.tag);
}); });
// Fetch 事件 - 基础的网络优先策略
self.addEventListener('fetch', (event) => {
// 只处理同源请求,跳过跨域请求
if (!event.request.url.startsWith(self.location.origin)) {
return;
}
// 只处理 GET 请求
if (event.request.method !== 'GET') {
return;
}
// 对于通知相关的资源,使用网络优先策略
event.respondWith(
fetch(event.request)
.catch(() => {
// 网络失败时,尝试从缓存获取
return caches.match(event.request)
.then(response => {
// 如果缓存也没有,返回一个基本的网络错误响应
if (!response) {
return new Response('Network error', {
status: 408,
statusText: 'Request Timeout',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
}
return response;
});
})
);
});
// 推送消息事件(预留,用于未来的 Push API 集成) // 推送消息事件(预留,用于未来的 Push API 集成)
self.addEventListener('push', (event) => { self.addEventListener('push', (event) => {
console.log('[Service Worker] Push message received:', event); console.log('[Service Worker] Push message received:', event);