什么是 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 头部，允许指定域名的跨域访问。例如，下面的代码允许所有域名的跨域访问：
Access-Control-Allow-Origin: *
2. 使用 JSONP
JSONP 是一种通过动态添加 script 标签来获取跨域数据的方法。由于 script 标签没有跨域限制，因此可以通过 JSONP 来实现跨域访问。
例如，下面的代码使用 JSONP 获取跨域数据：
function handleResponse(data) {
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleResponse';
document.body.appendChild(script);3. 使用代理服务器
使用代理服务器是一种常见的解决跨域访问的方法。通过在同一域名下建立一个代理服务器，将跨域请求转发到目标服务器上，从而实现跨域访问。
例如，下面的代码使用代理服务器获取跨域数据：
fetch('/proxy?url=http://example.com/data')
.then(response => response.json())
.then(data => console.log(data));示例代码
下面是一个使用 fetch 和 CORS 的示例代码：
fetch('http://example.com/data', {
mode: 'cors'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在服务器端需要设置允许跨域访问的 HTTP 头部，例如：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type
总结
PWA 和 CORS 是密切相关的，开发 PWA 应用需要考虑跨域访问的问题。解决跨域访问的方法包括服务器端设置允许跨域访问的 HTTP 头部、使用 JSONP 和使用代理服务器。在使用 fetch 和 CORS 的时候需要注意设置 mode 为 cors，同时在服务器端设置允许跨域访问的 HTTP 头部。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66359144d3423812e4312a40