Question

我们正在Angular 7应用程序中使用serviceWorker。当用户通过PUT请求从应用程序将文件（图像或PDF）上传到AWS S3时，将触发2个PUT请求，而不是1个。第一个PUT请求是从ServiceWorker，虽然不是应该的，但上传是从主线程完成的。第二个不是来自ServiceWorker，似乎没有文件发送。

结果，文件被错误地以0字节大小上传到S3。仅当我们在启用ServiceWorker的情况下运行应用程序时，才会发生此问题。似乎ServiceWorker正在缓存上传请求。

如何避免这种情况？

这是我在开发工具的网络标签中看到的：https://prnt.sc/odoaac

这是 angular.json 配置：

"production": {
    "fileReplacements": [
      {
        "replace":"apps/echo/src/environments/environment.ts",
        "with":"apps/echo/src/environments/environment.prod.ts"
      }
    ],
  "serviceWorker": true,
  "ngswConfigPath": "apps/echo/src/ngsw-config.json",
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
}

这是 ngsw-config.json 数据组：

"dataGroups": [
  {
    "cacheConfig": {
      "maxSize": "1",
      "maxAge": "0u",
      "timeout": "10m",
      "strategy": "freshness"
    },
    "name": "API",
    "urls": [
      "https://api.editorial.reali.com",
      "https://api.editorial.reali.com/",
      "https://api.editorial.reali.com/*",
      "https://api.editorial.reali.com/**",
      "https://s3.amazonaws.com",
      "https://s3.amazonaws.com/",
      "https://s3.amazonaws.com/*",
      "https://s3.amazonaws.com/**",
      "/version.json"
    ]
  },
  {
    "name": "GoogleFonts",
    "cacheConfig": {
      "maxSize": "20",
      "maxAge": "5d",
      "timeout": "1s",
      "strategy": "performance"
    },
    "urls": [
      "https://fonts.googleapis.com/**"
    ]
  }
]

Answer 1

实际上只有一个对服务器的PUT请求。您应该能够从S3访问日志中确认这一点。

devtools屏幕截图中会发生什么（我在这里重新添加以供将来参考！）

页面JS发送SW拦截的PUT请求
SW在拦截请求后，决定向服务器发出 actual 请求
发出实际请求时，浏览器会发现目标域不同
由于域不同，浏览器会自动将CORS预检请求（https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request）发送到服务器，并确认服务器支持PUT
服务器回答飞行前请求，并说PUT正常
浏览器将真正的，最终的，唯一的PUT请求发送到服务器

由于某种原因，文件被丢弃。我不确定为什么，因为我没有在Service Worker中处理文件上传。

Answer 2

我见过同样的问题。 https://github.com/angular/angular/issues/29629

文档如何绕过服务人员： https://angular.io/guide/service-worker-devops#bypassing-the-service-worker

Angular ServiceWorker发送两次上传PUT请求

2 个答案: