什么是 PWA
PWA，全称为 Progressive Web App，是一种渐进式 Web 应用，它可以像原生应用一样提供离线访问、推送通知、桌面快捷方式等功能，同时又能够在浏览器中访问，不需要安装任何应用。
PWA 的优势在于可以提供更好的用户体验，同时也可以提高网站的访问速度和转化率。
什么是 CORS
CORS，全称为 Cross-Origin Resource Sharing，是一种跨域资源共享的解决方案。由于浏览器的同源策略（Same-Origin Policy）限制，不同域名之间的 JavaScript 代码不能相互访问，这就导致了跨域访问的问题。
CORS 提供了一种机制，使得网页可以向其他域名的服务器请求数据，在服务器端设置允许跨域访问的 HTTP 头部，浏览器就可以安全地访问其他域名的资源了。
PWA 和 CORS 的关系
PWA 应用通常需要向服务器请求数据，而这些数据往往来自于不同的域名。如果没有 CORS 的支持，浏览器将无法访问这些数据，从而影响 PWA 的正常运行。
因此，PWA 和 CORS 是密切相关的，开发 PWA 应用需要考虑跨域访问的问题。
解决 CORS 的方法
1. 服务器端设置允许跨域访问的 HTTP 头部
在服务器端设置 Access-Control-Allow-Origin 头部，允许指定域名的跨域访问。例如，下面的代码允许所有域名的跨域访问：
---------------------------- -
2. 使用 JSONP
JSONP 是一种通过动态添加 script 标签来获取跨域数据的方法。由于 script 标签没有跨域限制，因此可以通过 JSONP 来实现跨域访问。
例如，下面的代码使用 JSONP 获取跨域数据：
-------- -------------------- - ------------------ - --- ------ - --------------------------------- ---------- - -------------------------------------------------- ----------------------------------
3. 使用代理服务器
使用代理服务器是一种常见的解决跨域访问的方法。通过在同一域名下建立一个代理服务器，将跨域请求转发到目标服务器上，从而实现跨域访问。
例如，下面的代码使用代理服务器获取跨域数据：
------------------------------------------- -------------- -- ---------------- ---------- -- -------------------
示例代码
下面是一个使用 fetch 和 CORS 的示例代码：
-------------------------------- - ----- ------ -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
在服务器端需要设置允许跨域访问的 HTTP 头部，例如：
---------------------------- - ----------------------------- ---- ----- ---- ------- ------- ----------------------------- ------------
总结
PWA 和 CORS 是密切相关的，开发 PWA 应用需要考虑跨域访问的问题。解决跨域访问的方法包括服务器端设置允许跨域访问的 HTTP 头部、使用 JSONP 和使用代理服务器。在使用 fetch 和 CORS 的时候需要注意设置 mode 为 cors，同时在服务器端设置允许跨域访问的 HTTP 头部。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66359144d3423812e4312a40