在现代化的 Web 应用程序中，通过使用 Progressive Web App（PWA）技术，我们可以让 Web 应用程序模拟本地应用程序的行为，包括离线访问、添加屏幕快捷方式等。这使得 PWA 成为一个非常有用的技术，但是在 PWA 中遇到的跨域请求问题仍然是一个棘手的问题。
本文将介绍如何在 PWA 中处理跨域请求。这将涉及到对 PWA 应用程序的 Service Worker、Fetch API 和 CORS 的深入了解，并提供示例代码来展示如何实现跨域请求处理。
什么是跨域请求？
当我们在一个域名下的网页中发出跨域请求时，请求会被浏览器拒绝。这是由浏览器的同源策略所决定的，同源策略是浏览器的一种安全机制，用于防止 Web 应用程序中的 XSS（Cross-Site Scripting）和 CSRF（Cross-Site Request Forgery）攻击。
同源是由协议、主机名和端口号组成的 URL 形式，只有当两个 URL 的所有部分相同，它们才被认为是同源。 在跨域请求中，至少有一个 URL 的部分与当前页面不同，其它的都是相同的。 这使得浏览器在处理跨域请求时必须执行额外的安全检查。
如何在 PWA 中处理跨域请求？
为了解决 PWA 中的跨域请求问题，我们需要采取不同的方法来处理跨域请求，这可以通过使用以下三种技术来实现：
1. Service Worker
PWA 应用的 Service Worker 可以拦截传入的请求并在客户端的缓存中存储资源。 Service Worker 可以在与主线程分离的线程中运行，协调网络和缓存。 Service Worker 为 PWA 提供了更多的控制权和灵活性，用于处理跨域请求。
Service Worker 的一个重要机制是它可以拦截网络请求，并根据一组规则将请求发送到本地缓存或网络。例如，我们可以使用 Service Worker 在本地缓存中存储跨域请求的响应，或将它们发送到服务器以避免同源策略限制。
以下是一个示例 Service Worker，可用于将跨域请求存储在客户端缓存中：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------------------------------------------------ -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
-
---在上述例子中，我们使用 Service Worker 拦截了以 https://example.com/api/ 开头的请求。如果请求匹配到本地缓存，则使用缓存响应；否则，将请求发送到服务器并返回响应。
2. Fetch API
Fetch API 是浏览器提供的一种新的网络请求机制，其为 PWA 应用程序提供了更好的对不同协议的控制。Fetch API 使得我们可以从第三方服务器获取数据，这一点在处理跨域请求时尤为重要。
Fetch API 的基本代码如下：
fetch(url)
.then(function(response) {
// 获取响应，处理数据
})
.catch(function(err) {
// 处理错误
});在上述代码中，我们使用 Fetch API 发送请求并返回响应。在处理跨域请求时，我们必须使用 Fetch API 的 mode 选择项来允许跨域请求：
fetch(url, { mode: 'cors' })
.then(function(response) {
// 获取响应，处理数据
})
.catch(function(err) {
// 处理错误
});在使用 mode="cors" 参数时，服务器需要设置 CORS 头来允许跨域请求。
3. CORS
跨域资源共享（CORS）是一种浏览器机制，用于解决跨域请求问题。它通过允许 Web 服务器向不同的源提供访问控制机制，从而为跨域请求提供了一种标准化的解决方案。
在应用程序中启用 CORS 的代码可能如下：
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});在上述代码中，我们允许所有来源的请求，并指定了一组允许的请求头。
结论
在本文中，我们介绍了如何在 PWA 应用程序中处理跨域请求，使用了 Service Worker、Fetch API 和 CORS。这些技术可以使我们在处理跨域请求时变得更加灵活，在一定程度上规避了同源策略的限制。 希望本文能为您提供帮助，也希望您能够在您的应用程序中顺利实现跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711f236ad1e889fe201c0cc