1. 什么是PWA
PWA全称Progressive Web Apps，是一种能够在网页端和移动端运行的应用程序，兼具Web应用的即开即用和原生应用程序的灵活性，具有更好的用户体验和可靠性。PWA是通过标准化技术栈（HTML，CSS和JavaScript）实现的，能够以用户友好的方式缓存应用程序的关键资产，提供离线访问，从而增强了可访问性和可靠性。
2. PWA实现跨域请求的问题
当我们想要在PWA中使用跨域的API时，通常会遇到一个问题：浏览器不允许我们跨域请求API，因为它们可能会被视为安全隐患。但是，跨域请求在PWA中是至关重要的，因为通常必须请求第三方资源来生成可靠的响应，以确保我们的PWA能够在离线情况下正常运行。因此，我们需要解决这个问题。
3. 使用CORS
通常，我们可以使用CORS（跨域资源共享）解决这个问题。CORS允许我们在使用XHR（XMLHttpRequest）对象向第三方域请求数据时，允许第三方域向我们的域授权，以允许浏览器在请求中包含头信息，从而允许跨域请求并获取所需的数据。在实践中，这意味着我们可以在需要的地方向服务器获取所需的数据。
以获取微博API为例，以下是一个简单的使用CORS的示例：
fetch("https://api.weibo.com/2/statuses/user_timeline.json?uid=11111&access_token=abcd1234",{ mode: "cors" })
.then(function(response) {
// 处理我们的响应
})
.catch(function(error) {
//处理错误
})在这个例子中，我们可以看到fetch函数使用mode选项参数来指定CORS模式，它允许我们使用基于浏览器的CORS标准来请求API。这允许我们轻松地跨域获取微博API，并将其包含在我们的PWA应用程序中。
4. 使用代理服务器
在某些情况下，如果第三方API不支持CORS，则无法使用CORS来进行跨域请求。在这种情况下，我们可以使用代理服务器来解决此问题。代理服务器是一种位于我们的服务器和第三方服务器之间的中介服务器，允许我们绕过CORS限制。
在这个例子中，我们使用Node.js编写了一个简单的代理服务器：
-- -------------------- ---- -------
----- ----- - -----------------
----- --------- - ----------------------
----- ------- - -------------------
----- --- - ----------
------------ ----- ---- -- -
----- ------ - ------------------------------------------
----- ----- - -----------------------------
------- -------
------- -----
---
----------------- ------------- ---- ---- -
-------------------
--------------------
---
-------------- -----
---
---------------- -- -- -
------------------- ------- -- -------
---在这个例子中，我们使用Node.js编写了一个简单的Express服务器，它充当代理服务器。使用http-proxy将请求转发给我们所需的API地址。我们使用扩展名为originalUrl（即请求指向的原始API）的请求对象来构造API URL，然后使用代理服务器将请求转发给第三方API。
5. 结论
总的来说，在解决PWA中跨域请求的问题上，我们可以选择使用CORS或代理服务器来实现。在实践中，CORS是更常见的解决方案，因为它不需要额外的服务器设置，并且在某些情况下可能是更好的解决方案。当然，具体选择还需要根据API本身来定。在实际开发中，我们通常会根据情况和需求选择最适合我们的方法来解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736cc6e0bc820c582567116