背景
PWA（Progressive Web App）是一种新型的 Web 应用程序，它可以像本地应用程序一样运行，并且可以在离线时继续工作。PWA 中使用的 fetch API 可以轻松地从服务器获取数据，但是在跨域请求时会被浏览器拦截，导致请求失败。
问题分析
跨域请求被浏览器拦截是因为浏览器的同源策略（Same-Origin Policy）。同源策略要求浏览器只能访问与当前页面具有相同协议、主机和端口的资源。如果请求的资源不符合同源策略，浏览器就会拒绝请求。
解决方案
1. 服务器设置 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域资源共享机制，它允许服务器向其他域名的网页发送 XMLHttpRequest 请求。服务器可以通过设置 HTTP 响应头来启用 CORS。
在服务器端添加以下 HTTP 响应头，即可启用 CORS：
---------------------------- -
其中 * 表示允许所有域名的请求。如果只想允许特定的域名请求，可以将 * 替换为该域名。
2. 使用代理服务器
由于浏览器的同源策略，我们无法直接访问其他域名的资源。但是，我们可以通过代理服务器来解决这个问题。代理服务器可以将浏览器发送的请求转发到目标服务器，并将响应返回给浏览器。
例如，我们可以在本地启动一个 Node.js 服务器，将浏览器发送的请求转发到目标服务器：
----- ---- - ----------------
----- ----- - -----------------
----- --- - ---------------
----------------------- ---- -- -
----- ------- - -------------------
--------------- - ------------
----- -------- - ---------------------- ---------- -- -
---------------------------------- ------------------
-------------------
---
-------------------
----------------然后，在 PWA 中使用代理服务器的地址来发送请求：
--------------------------------------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
3. JSONP
JSONP（JSON with Padding）是一种跨域解决方案，它利用了 <script> 标签可以跨域加载资源的特性。JSONP 请求是通过在 URL 中添加一个回调函数名的方式来实现的。
例如，我们可以在服务器端返回以下 JSONP 数据：
---------- ------- -------- ------ -- ---
然后，在 PWA 中使用以下代码来发送 JSONP 请求：
-------- -------------- - ------------------ - ----- ------ - --------------------------------- ---------- - ------------------------------------------------ ----------------------------------
总结
跨域请求被浏览器拦截是 Web 开发中常见的问题，但是通过 CORS、代理服务器和 JSONP 等解决方案，我们可以轻松地解决这个问题。在使用 PWA 开发时，我们需要选择合适的解决方案来处理跨域请求，以确保应用程序的正常运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6610bcb2d10417a22215f024