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:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user