CORS（Cross-Origin Resource Sharing）是一种浏览器安全机制，用于限制一个网站在浏览器中加载来自另一个域名的资源。在 PWA（Progressive Web App）开发中，我们经常需要使用跨域资源，例如从 API 获取数据或者加载第三方库。本文将介绍如何在 PWA 中处理 CORS 问题。
CORS 基础
在了解如何处理 CORS 问题之前，我们需要先了解 CORS 的基础知识。当浏览器发起跨域请求时，先发送一个 OPTIONS 请求，询问服务器是否允许跨域访问。如果服务器允许，浏览器才会发送真正的请求。服务器可以通过设置响应头来控制 CORS 行为，例如：
Access-Control-Allow-Origin: *
这个响应头表示允许任何域名访问该资源。如果服务器只想允许特定的域名访问该资源，可以将 * 替换为该域名。此外，服务器还可以设置其他响应头，例如：
Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Content-Type
这些响应头用于控制允许的请求方法和请求头。如果服务器不设置这些响应头或者设置错误，浏览器会拒绝跨域请求。
PWA 中的 CORS 处理
在 PWA 中处理 CORS 问题有多种方法，下面介绍两种常用的方法。
1. 使用代理
使用代理是一种简单有效的处理 CORS 问题的方法。在 PWA 中，我们可以使用 Service Worker 来实现代理。Service Worker 可以拦截浏览器发起的请求，然后将请求转发到服务器，并将服务器返回的响应返回给浏览器。由于 Service Worker 运行在浏览器中，因此它不受同源策略的限制，可以访问任何域名的资源。
下面是一个示例代码，使用 Service Worker 实现代理：
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------------------
-------- -- -------------------- ------ -------
--------- -- -------------------- ------ --------
-
-- ------- ------ --
------------------------------ ----- -- -
-- ----
----- --- - --- -----------------------
-- ------------- --- -------------- -
------------------------------------- - --------------------------
-
---
-- ----
----- ----- - ---------------------------------
-------------- - ------------- -
----------------- ------- ------- -------------------- ----
--在这个示例中，我们使用了 http-proxy-middleware 模块来实现代理。当浏览器发起到 example.com 的请求时，Service Worker 会将请求转发到 /proxy，然后 http-proxy-middleware 会将请求转发到 example.com，并将服务器返回的响应返回给浏览器。注意，这个示例中的代理脚本是运行在服务器端的，因此需要将它部署到服务器上。
使用代理的优点是简单易用，可以快速解决大部分 CORS 问题。但是它也有一些缺点，例如需要额外的服务器资源，会影响请求的速度和稳定性。
2. 使用 JSONP
JSONP（JSON with Padding）是一种跨域请求的方法，它利用了浏览器对 <script> 标签的特殊处理方式。在 JSONP 中，我们将请求的数据封装在一个 JavaScript 函数中，然后通过 <script> 标签加载这个函数。服务器返回的响应应该是一个 JavaScript 函数调用，例如：</p> <pre class="prettyprint login javascript">callback({ data: 'hello world' });</pre><p>客户端可以定义一个与服务器返回的函数名称相同的函数，然后将这个函数作为参数传递给服务器。服务器在返回响应时，会将数据封装在这个函数中，然后通过 <script> 标签加载这个函数。客户端就可以在加载完成后获取到服务器返回的数据。</p> <p>下面是一个示例代码，使用 JSONP 实现跨域请求：</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- -- ----- -------- ----------- - ----- ------ - --------------------------------- ---------- - ---------------------------------------------- ---------------------------------- - -------- ---------------- - ------------------ - -- ------ ---------------- ----- ---- -- - ----- ---- - - -------- ------ ------ -- ----- -------- - ------------------- ----- ------ - --------------------------------------- ----------------- ---</pre><p>在这个示例中，我们使用了 Express 框架来实现服务器端代码。当客户端调用 fetchData 函数时，会创建一个 <script> 标签，然后加载 <a href="http://example.com/data?callback=handleData%E3%80%82%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BC%9A%E5%B0%86%E6%95%B0%E6%8D%AE%E5%B0%81%E8%A3%85%E5%9C%A8">http://example.com/data?callback=handleData。服务器会将数据封装在</a> handleData 函数中，然后返回给客户端。客户端在加载完成后会调用 handleData 函数，并将数据作为参数传递给它。</p> <p>使用 JSONP 的优点是不需要额外的服务器资源，请求速度较快，但它也有一些缺点，例如只能使用 GET 方法，无法使用 POST 等其他方法，而且容易受到 XSS 攻击。</p> <h2>总结</h2> <p>在 PWA 开发中，处理 CORS 问题是必不可少的一部分。我们可以使用代理或者 JSONP 来解决 CORS 问题。使用代理是一种简单易用的方法，但需要额外的服务器资源；使用 JSONP 可以减少服务器资源，但只能使用 GET 方法。在选择方法时，需要根据实际情况进行选择，以达到最佳效果。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/6555d4b1d2f5e1655d03df54">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/6555d4b1d2f5e1655d03df54">https://www.javascriptcn.com/post/6555d4b1d2f5e1655d03df54</a></p> </blockquote>