3

问题：

无法处理 Angular6 服务工作者中的 Firebase 存储 URL（可能是由于 CORS）。

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [ {
      "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
      } ]
      }, {
      "source" : "**/*.@(jpg|jpeg|gif|png)",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=7200"
      } ]
      }, {
      "source" : "404.html",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=300"
      } ]
    } ]
  }
}

ngsw-conf.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/apple-touch-icon-precomposed.png",
        "/apple-touch-icon.png",
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ],
    "urls": [
      "https://fonts.googleapis.com/**",
      "https://firebasestorage.googleapis.com/**"
    ]
    }
  }],
  "dataGroups": [{
      "name": "api-performance",
      "urls": [
        "/some_route"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    }
  ]
}

所有文件都使用以下元数据上传到 Firebase 存储：

{
  cacheControl: 'public,max-age=36000',
  contentType: 'image/jpeg'
}

当我在 Chrome 或 Opera 中加载应用程序时，应用程序呈现正常，但我收到错误消息“加载some_firebase_storage_download_link失败：请求的资源上不存在“Access-Control-Allow-Origin”标头。Origin my_app_domain因此不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。当我重新加载应用程序时，没有加载任何 Firebase 存储资源。

当我在 Safari 或 Edge 中加载应用程序时，应用程序根本不会呈现，并且我收到多个控制台错误“加载资源失败”。

该应用程序正在 Firefox 中呈现和缓存，没有任何问题。

当我省略 Firebase 存储并仅使用 Firebase 托管中的资源时，应用程序会在所有浏览器中无错误地缓存。

我已搜索将请求的模式设置为“no-cors”，但未能就我的问题达成任何解决方案。

更新

这可能是由 NGSW 和 Firebase Firestore 持久性处理程序（即： firebase.firestore().enablePersistence(); ）的干扰引起的。我不确定 Firebase Firestore 持久性究竟是如何工作的，但是当我在没有 Firestore 持久性的情况下初始化应用程序时，我能够缓存来自 Firebase 存储的动态链接。这对我没有用，因为我需要同时使用数据库和存储。

4

0 回答 0