随着 PWA 技术的逐渐普及，前端开发中 PWA 越来越受到开发者的关注。然而，由于安全原因，浏览器常常限制跨域请求，这对于 PWA 应用来说可能会造成一些麻烦。本文将对 PWA 跨域请求的限制进行探讨，并提供一些解决方案。
PWA 跨域请求的限制
简单来说，浏览器的跨域请求限制是基于安全考虑而制定的。如果不做限制，攻击者可以通过请求其他网站的数据来盗取用户的信息。因此，现代浏览器限制了浏览器的 JavaScript 代码在从一个源加载的 Web 应用程序中运行时，访问其他源的 Web 应用程序的访问。如果违反了这一原则，浏览器会报出以下错误信息：
Access to XMLHttpRequest at 'https://example.com/api/data' from origin 'https://mypwaapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这通常是由于服务端没有设置适当的跨域访问头而导致的。
- 设置跨域访问头
当浏览器发现一个跨域的请求时，会向目标服务器发送一个预先请求（OPTIONS 请求），以检查是否允许进行跨域访问。如果服务器允许跨域访问，那么它应该在响应中设置 Access-Control-Allow-Origin 头部，以允许目标域名的访问。
假设我们需要从 https://example.com/api/data 进行跨域请求，可以在服务端中设置以下头部：
// Node.js
app.use(function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});这样就可以让浏览器正常地请求该服务的数据了。
- 使用 JSONP
使用 JSONP 的方式可以绕过浏览器的跨域请求限制。JSONP 全称是 JSON with Padding，是一种非官方协议，可让网页从别的域名（网站）那获取资料，即跨域读取数据。
那么如何使用 JSONP 呢？以 jQuery 为例，我们可以这样使用：
$.getJSON('https://example.com/api/data?callback=?', function(data){
// 处理数据
});callback=? 的作用是告诉服务端要使用 JSONP 的方式返回数据，jQuery 会自动生成一个随机的回调函数名，并将其作为参数传递给服务端。服务端返回的数据应该是这样的：
callbackFunctionName({
data: '数据'
});从而我们可以在客户端中写下一个名为 callbackFunctionName 的函数来处理数据。这样就可以解决跨域请求的问题了。
- 使用代理服务
使用代理服务可以避免跨域请求问题，同时也增加了服务器的开销。我们可以在自己的服务器上搭建一个代理服务，将浏览器的请求转发到目标服务上。
假设我们需要从 https://example.com/api/data 进行跨域请求，我们可以在自己的服务器上搭建一个节点，将请求地址改为 https://myserver.com/proxy/api/data，然后在服务端中将请求转发到目标服务上。两段代码分别如下：
客户端：
$.getJSON('https://myserver.com/proxy/api/data', function(data){
// 处理数据
});服务端：
app.get('/proxy/api/data', function(req, res){
request('https://example.com/api/data').pipe(res);
});这样浏览器请求时就会先发送到自己的服务器上，然后再由自己的服务器转发请求到目标服务上，从而避免了跨域请求的限制。
总结
本文介绍了 PWA 跨域请求的限制，以及解决方案。每种方案都有其优缺点，开发者应根据实际需求进行选择。对于 PWA 开发来说，了解跨域请求的限制是十分必要的，也是进行前端开发的基础知识之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d1e3848841e98949d5d82
