title: Can a service worker fetch and cache cross-origin assets?
body: <p>I'm using some service worker code from the  <a href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/" rel="noreferrer">Progressive Web app tutorial by Google</a> but I am getting an error:</p>
  
  <pre>
  Uncaught (in promise) TypeError:
   Failed to execute 'clone' on 'Response':
   Response body is already used
  </pre>
  
  <p>The site uses third-party Javascript and stylesheets for web fonts.
    I want to add assets hosted on these CDNs to the offline cache.</p>
  
  <pre><code>addEventListener("fetch", function(e) {
    e.respondWith(
      caches.match(e.request).then(function(response) {
          return response || fetch(e.request).then(function(response) {
          var hosts = [
            "https://fonts.googleapis.com",
            "https://maxcdn.bootstrapcdn.com",
            "https://cdnjs.cloudflare.com"
          ];
          hosts.map(function(host) {
            if (e.request.url.indexOf(host) === 0) {
              caches.open(CACHE_NAME).then(function(cache) {
                cache.put(e.request, response.clone());
              });
            }
          });
          return response;
        });
      })
    );
  });
  </code></pre>
  
  <p>These are hosted on popular CDNs, so my hunch is they should be doing the right thing for CORS headers.</p>
  
  <p>Here are the assets in the HTML that I want to cache:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic"&gt;
  &lt;link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Lato:900,300" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" type="text/css"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"&gt;
  &lt;script type="text/javascript" async
          src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>According to the console logs, the service worker is <em>trying</em> to fetch these assets:</p>
  
  <pre>
  Fetch finished loading:
   GET "https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css".
   sw.js:32
  Fetch finished loading:
   GET "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML".
   sw.js:32
  Fetch finished loading:
   GET "https://fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic".
   sw.js:32
  Fetch finished loading:
   GET "https://fonts.googleapis.com/css?family=Lato:900,300".
   sw.js:32
  Fetch finished loading:
   GET "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/config/TeX-AMS-MML_HTMLorMML.js?V=2.7.1".
   sw.js:32
  Fetch finished loading:
   GET "https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0".
   sw.js:32
  </pre>
  
  <p>If I remove the <code>clone</code>, as was suggested in <a href="https://stackoverflow.com/q/45618984/73449">Why does fetch request have to be cloned in service worker?</a>, I'll get the same error:</p>
  
  <pre>
  TypeError: Response body is already used
  </pre>
  
  <p>If I add <code>{ mode: "no-cors" }</code> to the fetch per <a href="https://stackoverflow.com/q/44808368/73449">Service worker CORS issue</a>, I'll get the same error and these warnings:</p>
  
  <pre>
  The FetchEvent for
   "https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0"
   resulted in a network error response: an "opaque" response was
   used for a request whose type is not no-cors
  The FetchEvent for
   "https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2"
   resulted in a network error response: an "opaque" response was
   used for a request whose type is not no-cors
  The FetchEvent for
   "https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2"
   resulted in a network error response: an "opaque" response was
   used for a request whose type is not no-cors
  The FetchEvent for
   "https://fonts.gstatic.com/s/merriweather/v19/u-4n0qyriQwlOrhSvowK_l521wRZWMf6hPvhPQ.woff2"
   resulted in a network error response: an "opaque" response was
   used for a request whose type is not no-cors
  </pre>
  
  <p>I could add these assets to the static cache in the service worker's <code>install</code> event, but I have reasons to add them to the cache only in the <code>fetch</code> event.</p>