在开发 PWA 应用时，我们可能会遇到一种情况：当我们使用 XHR（XMLHttpRequest）对象请求跨域资源时，返回的文件大小为 0，这是因为浏览器出于安全考虑，阻止了跨域请求。那么，如何解决这个问题呢？
什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序模型，是 Web 应用程序和移动应用程序的完美结合。PWA 具有以下特点：
- 可以脱离网络使用
- 可以在桌面上启动
- 可以像移动应用一样在主屏幕上添加图标
- 可以像移动应用一样推送通知
PWA 应用遇到的跨域问题
当 PWA 应用请求跨域资源时，浏览器会阻止请求，这是为了保护用户的隐私和安全。但是，有时候我们确实需要请求跨域资源，比如请求第三方 API 或者 CDN 上的资源。这时候，我们就需要解决跨域问题了。
解决跨域问题的方法
- 使用 CORS（Cross-Origin Resource Sharing）协议
CORS 协议是一种跨域资源共享的协议，它允许跨域请求资源。我们可以在服务器端设置响应头，允许指定域名的请求。示例代码如下：
Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET, POST, PUT, DELETE Access-Control-Allow-Headers: Content-Type
- 使用 JSONP（JSON with Padding）
JSONP 是一种跨域请求的方式，它利用了 script 标签不受跨域限制的特点。我们可以在客户端动态创建 script 标签，指定请求的 URL，并在 URL 中添加一个回调函数名，服务端返回一个 JavaScript 函数调用，客户端接收到响应后，就可以执行这个回调函数了。示例代码如下：
-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - -------------------------------- ---------- - --- - ------------ - -------- --------------------------------- - ----------------------------------------- ----------------- -------- -------------------- - ----------------- -
- 使用代理服务器
如果以上两种方式都无法解决问题，我们可以使用代理服务器。代理服务器可以将客户端的请求转发到目标服务器，并将响应返回给客户端，这样就避免了跨域问题。示例代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------- - ------------------ ----- --- - --------- --------------- ----- ---- -- - ----- --- - ------------------------- - ------- -------------------------------- -- ---------------- -- -- - ------------------ ------ -- ------- -- ----------------------- --
XHR 文件下载大小为 0 的问题
以上三种方式都可以解决跨域问题，但是有时候我们在使用 XHR 请求跨域资源时，会遇到一个问题：文件大小为 0。这是因为浏览器会将跨域请求的响应设置为 opaque，导致 XHR 对象无法读取响应体。解决这个问题的方法是将 XHR 的 responseType 设置为 blob，然后将 blob 对象转换为 URL，最后使用 URL.createObjectURL() 方法创建一个对象 URL，就可以下载跨域资源了。示例代码如下：
-- -------------------- ---- -------
-------- ----------------- -
----- --- - --- ----------------
--------------- ---- -----
---------------- - ------
---------- - -- -- -
-- ----------- --- ---- -
----- ---- - ------------
----- --- - -------------------------
----- ---- - ---------------------------
--------- - ---
------------- - ----------
------------
------------------------
-
-
----------
-
--------------------------------------------总结
PWA 应用遇到跨域导致 XHR 文件下载大小为 0 的问题，可以通过设置 CORS 响应头、使用 JSONP 或者代理服务器来解决跨域问题。如果遇到 XHR 文件下载大小为 0 的问题，可以将 XHR 的 responseType 设置为 blob，然后将 blob 对象转换为 URL，最后使用 URL.createObjectURL() 方法创建一个对象 URL，就可以下载跨域资源了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66042db0d10417a22214a864