随着移动设备和 Web 技术的不断发展，PWA（Progressive Web App）成为了越来越受欢迎的一种 Web 应用开发方式。PWA 可以让 Web 应用具有类似原生应用的体验，比如离线访问、推送通知等功能。在 PWA 的开发中，跨域访问和跨域调用是非常重要的一环。本篇文章将详细介绍 PWA 中如何实现跨域访问和跨域调用，并提供示例代码。
什么是跨域访问和跨域调用
跨域访问和跨域调用是 Web 开发中常用的技术，特别是在 PWA 中更是必不可少。所谓跨域访问，指的是在一个网站的页面中访问另一个网站的资源；跨域调用，则是在一个网站的页面中调用另一个网站的接口。在 Web 开发中，由于浏览器的同源策略限制，跨域访问和跨域调用会受到一定的限制。因此，我们需要采用一些技术手段来实现跨域访问和跨域调用。
如何实现跨域访问
在 PWA 中，我们通常需要访问一些第三方资源，比如图片、字体、视频等。这些资源可能存储在不同的域名下，因此我们就需要实现跨域访问。实现跨域访问的方式有很多，我们可以使用 CORS、JSONP、代理等技术。
CORS
CORS（Cross-Origin Resource Sharing）是一种跨域访问的技术，它允许 Web 应用从不同的域访问其它域的资源。CORS 的原理是在服务端设置 Access-Control-Allow-Origin 头信息，指定允许访问的域名。在 PWA 中，我们可以通过 Fetch API 来实现跨域访问。下面是一个使用 Fetch API 实现跨域访问的示例代码：
-------------------------------------- - ----- ------ ---------------- -- - -- ---- -------------- -- - -- ---- ---
在上面的代码中，我们通过 Fetch API 来访问 https://example.com/image.jpg 图片资源，并设置 mode 为 cors。这样就可以实现跨域访问了。
JSONP
JSONP（JSON with Padding）是一种跨域访问的技术，它的原理是利用 script 标签没有跨域限制的特性来实现跨域请求。在 PWA 中，我们可以通过动态创建 script 标签来实现跨域访问。下面是一个使用 JSONP 实现跨域访问的示例代码：
-------- ---------- --------- - ----- ------ - --------------------------------- ---------- - --- - ------------ - --------- ---------------------------------- - -------------------------------------- -------------- -------- ---------------- - -- ---- -
在上面的代码中，我们通过动态创建 script 标签，将请求的 URL 和回调函数名拼接成一个完整的 URL，并将 script 标签添加到 head 中。服务器返回的数据会作为回调函数的参数传递，我们只需要定义一个回调函数来处理数据即可。
代理
代理是一种常用的跨域访问技术，它的原理是在服务端设置代理服务器，将客户端的请求转发到目标服务器，并将目标服务器的响应返回给客户端。在 PWA 中，我们可以使用 Service Worker 来实现代理。下面是一个使用 Service Worker 实现代理的示例代码：
------------------------------ ----- -- -
----- --- - --- -----------------------
-- ----------- --- ------------ -
------------------
------------------- - ----
--
-
---在上面的代码中，我们在 Service Worker 的 fetch 事件中判断请求的域名是否与当前域名相同，如果不同则将请求转发到代理服务器，代理服务器再将请求转发到目标服务器。我们可以自己实现代理服务器，也可以使用第三方服务来实现代理。
如何实现跨域调用
在 PWA 中，我们通常需要调用一些第三方接口，比如天气、地图、支付等。这些接口可能存储在不同的域名下，因此我们就需要实现跨域调用。实现跨域调用的方式有很多，我们可以使用 CORS、JSONP、PostMessage、WebSocket 等技术。
CORS
CORS 也可以用于跨域调用，它的原理与跨域访问相同。在 PWA 中，我们可以通过 Fetch API 来实现跨域调用。下面是一个使用 Fetch API 实现跨域调用的示例代码：
-------------------------------- -
------- -------
----- -------
-------- -
--------------- ------------------
--
----- ----------------
-- ----
--
---------------- -- -
-- ----
-------------- -- -
-- ----
---在上面的代码中，我们通过 Fetch API 来调用 https://example.com/api 接口，并设置 mode 为 cors。需要注意的是，服务器需要设置 Access-Control-Allow-Origin 头信息，指定允许访问的域名。
JSONP
JSONP 也可以用于跨域调用，它的原理与跨域访问相同。在 PWA 中，我们可以通过动态创建 script 标签来实现跨域调用。下面是一个使用 JSONP 实现跨域调用的示例代码：
-------- ---------- --------- - ----- ------ - --------------------------------- ---------- - --- - ------------ - --------- ---------------------------------- - -------------------------------------------- -------------- -------- ---------------- - -- ---- -
在上面的代码中，我们通过动态创建 script 标签，将请求的 URL 和回调函数名拼接成一个完整的 URL，并将 script 标签添加到 head 中。服务器返回的数据会作为回调函数的参数传递，我们只需要定义一个回调函数来处理数据即可。
PostMessage
PostMessage 是一种跨域调用的技术，它的原理是在两个窗口之间建立通信渠道，实现跨域通信。在 PWA 中，我们可以使用 PostMessage 来实现跨域调用。下面是一个使用 PostMessage 实现跨域调用的示例代码：
----- ------ - ---------------------------------
---------- - ----------------------------------
----------------------------------
---------------------------------- ----- -- -
-- ------------- --- ---------------------- -
-- ----
-
---
----------------------------------
-- ----
-- -----------------------在上面的代码中，我们通过创建一个 iframe 并设置 src 为目标 URL，建立通信渠道。然后在父窗口中监听 message 事件，判断消息来源是否为目标 URL。在子窗口中通过 postMessage 方法发送请求参数，父窗口接收到响应后处理数据。
WebSocket
WebSocket 是一种跨域调用的技术，它的原理是在客户端和服务器之间建立长连接，实现实时通信。在 PWA 中，我们可以使用 WebSocket 来实现跨域调用。下面是一个使用 WebSocket 实现跨域调用的示例代码：
----- ------ - --- ----------------------------------
------------------------------- ----- -- -
----------------------------
-- ----
----
---
---------------------------------- ----- -- -
-- ----
---
-------------------------------- ----- -- -
-- ----
---在上面的代码中，我们通过创建一个 WebSocket 并设置 URL，建立长连接。在连接成功后通过 send 方法发送请求参数，服务器接收到请求后处理数据，并通过 send 方法发送响应数据。客户端接收到响应后处理数据。
总结
在 PWA 的开发中，跨域访问和跨域调用是非常重要的一环。本篇文章介绍了在 PWA 中如何实现跨域访问和跨域调用，并提供了示例代码。希望本篇文章对大家有所帮助，也希望大家能够在开发中遵循 Web 标准，合理使用跨域技术，提升 Web 应用的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65de7caf1886fbafa4bc6cf1