问题描述
我在用service worker缓存我的静态资源文件,每次直接加载时,可以读取静态资源。但是service worker会报这个错。
解决方案
- CDN返回要加跨域头。
- 请求静态资源时,要带上origin。具体做法:每个静态资源标签加
crossorigin="anonymous"
。
解释原因
- 如果index.html中用了
<script>
或<link>
标签,没带crossorigin="anonymous"
,则发静态资源请求时,request header不会带origin
。 - 如果发请求时,不带origin,后端不认为是跨域,不会返回Access-Control-Allow-Origin。但资源会正确返回。
- service worker会缓存response header。如果你按照2做了,那么service worker读取资源时,发现是跨域,且response header中没有Access-Control-Allow-Origin,就拒绝读取response body。