title: CORS preflight request sent from service worker, but not from regular request
body: <p>I'm confused about the differences between a fetch request from the service worker vs. a fetch request from a regular script.</p>
  
  <p>I added a service worker to intercept the request made by an audio element that links to an mp3 on another domain and the request fails because the preflight request is unsuccessful. However, if I make the same request from a script it looks like it is successful because no preflight request is made.</p>
  
  <p>Here is an example glitch with the above issue:
  <a href="https://lucky-marsupial.glitch.me/" rel="nofollow noreferrer">https://lucky-marsupial.glitch.me/</a></p>
  
  <p>Code here:
  <a href="https://glitch.com/edit/#!/lucky-marsupial" rel="nofollow noreferrer">https://glitch.com/edit/#!/lucky-marsupial</a></p>
  
  <p>Relevant code extracted below:</p>
  
  <pre><code>--index.html--
  ...
  &lt;audio src="https://traffic.libsyn.com/thefeed/126_thefeed.mp3?dest-id=149503" crossorigin="anonymous" controls="controls"&gt; Your browser does not support the audio element. &lt;/audio&gt;
  ...
  
  --sw.js--
  self.addEventListener('fetch', event =&gt; {
    console.log('inside service worker', event.request.url)
    event.respondWith(
      fetch(event.request)
        .then(response =&gt; {
          if (response.status === 302) {
            console.log("This line is never reached because preflight failed.")
          }
          return response
        })
    )
  })
  
  --equivalent fetch request--
  fetch("https://traffic.libsyn.com/thefeed/126_thefeed.mp3?dest-id=149503",{mode: 'cors'})
    .then(response =&gt; {
      console.log("This line is reached because no preflight request is sent.")
      return response
    })
  </code></pre>
  
  <p>You made need to reload the page for the service worker to take affect and then try to play the audio and you should see the error message in the console.</p>