javascript - 服务 worker 发送的 CORS 预检请求，而不是常规请求

Question

我对来自服务 worker 的提取请求与来自常规脚本的提取请求之间的区别感到困惑。

我添加了一个服务 worker 来拦截链接到另一个域上的 mp3 的音频元素发出的请求，但请求失败，因为预检请求不成功。但是，如果我从脚本发出相同的请求，它看起来是成功的，因为没有发出预检请求。

这是上述问题的一个故障示例: https://lucky-marsupial.glitch.me/

代码在这里: https://glitch.com/edit/#!/lucky-marsupial

相关代码摘录如下:

--index.html--
...
<audio src="https://traffic.libsyn.com/thefeed/126_thefeed.mp3?dest-id=149503" crossorigin="anonymous" controls="controls"> Your browser does not support the audio element. </audio>
...

--sw.js--
self.addEventListener('fetch', event => {
  console.log('inside service worker', event.request.url)
  event.respondWith(
    fetch(event.request)
      .then(response => {
        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 => {
    console.log("This line is reached because no preflight request is sent.")
    return response
  })

您需要重新加载页面以使 Service Worker 生效，然后尝试播放音频，您应该会在控制台中看到错误消息。

Answer 1

我相信我已经解决了这个问题。我认为由于请求的响应 header 将其内容类型设置为 text-html 它会自动触发预检请求，因为它不是列出的内容类型之一 here .但是，如果在请求中设置了内容类型，则内容类型仅对预检有影响，因此脚本中的提取不需要预检。

但是，service worker 中的请求有一个 header ，而不是上面链接 range 中列出的 header 。导致需要预检。添加范围 header 或除上面链接中列出的 header 之外的任何 header ，会导致从脚本中提取以发送预检请求。

有趣的是，当请求是由音频元素本身而不是服务 worker 发出时，它似乎不会触发预检请求，即使您认为它们是同一个请求。