移动端 Service Worker 发送埋点为何看不到响应状态
在 Service Worker 中使用 no-cors 模式发送请求会导致响应变为不透明，无法读取状态码和响应体。
检查 fetch 请求的 mode 参数是否为 no-cors
在移动端 Service Worker 中发送跨域请求时，如果需要发送埋点数据且无法控制目标服务器，通常会使用 fetch API。当 mode 参数被设置为 no-cors 时，浏览器会绕过跨域检查，但代价是响应变为不透明。这意味着响应的状态码固定为 0，响应头为空，且响应体无法被 JavaScript 读取。这种设计是为了安全，防止不透明的响应泄露敏感信息。
开发者可以通过检查 fetch 请求的配置对象来确认是否使用了 no-cors 模式。如果代码中显式指定了 mode: 'no-cors'，那么无论服务器返回什么，Service Worker 都无法获取到有效的响应信息。这种情况下，请求虽然会发送出去，但无法确认是否成功，也无法处理返回的数据。因此，看不到响应状态是 no-cors 模式的预期行为。
验证响应是否为不透明状态及其影响
当请求成功发送但响应为不透明时，JavaScript 代码无法访问响应的任何属性。具体来说，status 属性为 0，headers 对象为空，body 不可读。这意味着即使服务器返回了 200 OK 或 500 错误，Service Worker 也无法区分。这种状态通常用于发送无法读取响应内容的请求，例如发送分析数据或缓存资源。
为了验证响应是否为不透明，可以在 Service Worker 中添加错误处理逻辑。由于无法读取响应内容，通常只能捕获网络错误或请求失败的情况。如果请求成功发送但无响应数据，这通常意味着响应为不透明。开发者需要接受这种限制，或者考虑使用代理服务器来获取可读的响应。
使用代理服务器获取可读的跨域响应
如果需要读取跨域响应的内容或状态码，且无法控制目标服务器，可以使用代理服务器。代理服务器位于你和目标服务器之间，由你控制。代理服务器可以发起跨域请求到目标服务器，并将响应返回给你，同时添加适当的 CORS 头部。这种方法会增加延迟，并引入对代理服务器的依赖，但在无法控制目标服务器时是可行的解决方案。
使用代理服务器的步骤包括：在你的服务器上实现一个端点，该端点接收来自客户端的请求，然后使用 fetch 或其他 HTTP 客户端向目标服务器发起请求。代理服务器将目标服务器的响应返回给客户端，并添加 Access-Control-Allow-Origin 等头部。这样，客户端就可以读取响应的状态码和内容，而无需直接与目标服务器通信。
排查浏览器控制台中的 CORS 错误信息
浏览器控制台会显示 CORS 相关的错误信息，帮助定位问题。如果请求失败，控制台可能会显示类似“CORS request did not succeed”或“CORS header 'Access-Control-Allow-Origin' missing”的错误。这些错误信息可以指示请求失败的原因，例如服务器未设置正确的 CORS 头部或请求方法不被允许。
在移动端调试时，打开浏览器的开发者工具并查看控制台。如果看到 CORS 错误，检查请求的配置是否符合 CORS 规则。例如，确保请求方法为 GET、HEAD 或 POST，且 Content-Type 为允许的类型。如果请求不符合简单请求的条件，浏览器会发送预检请求，如果预检失败，也会导致请求失败。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。