什么是 CORS 问题？
CORS（Cross-Origin Resource Sharing）跨域资源共享，是一种浏览器安全策略，用于限制跨域访问资源。在 PWA 应用中，我们经常会遇到跨域请求数据的情况，而当请求的资源与当前应用的源不同时，就会出现 CORS 问题。
为什么会出现 CORS 问题？
当我们在 PWA 应用中向其他域名（或者端口、协议）发送请求时，浏览器会先向服务器发起一个预检请求（Preflight Request），这个请求是为了让服务器知道是否允许当前域名的请求。如果服务器返回的响应头中没有包含当前域名的信息，那么就会出现 CORS 问题。
如何解决 CORS 问题？
1. 使用代理服务器
代理服务器是一种可以接收客户端请求并将请求转发给目标服务器的服务器。我们可以在代理服务器中设置响应头，让服务器知道允许当前域名的请求。在 PWA 应用中，我们可以使用 Service Worker 作为代理服务器，将请求转发给目标服务器并设置响应头。
以使用 Service Worker 作为代理服务器的方式为例，我们可以在 Service Worker 中编写如下代码：
// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
// 判断当前请求是否需要代理
if (event.request.url.startsWith('https://api.example.com/')) {
// 构造代理请求
var proxyRequest = new Request(event.request.url, {
method: event.request.method,
headers: event.request.headers,
mode: 'cors',
credentials: 'omit',
});
// 发送代理请求
event.respondWith(fetch(proxyRequest));
// 设置响应头
event.waitUntil(
fetch(proxyRequest).then(function(response) {
var headers = new Headers(response.headers);
headers.set('Access-Control-Allow-Origin', self.origin);
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: headers,
});
})
);
}
});上述代码中，我们首先判断当前请求是否需要代理，然后构造代理请求并发送。在发送代理请求的同时，我们还会设置响应头，让服务器知道允许当前域名的请求。
2. 在服务器中设置响应头
除了使用代理服务器之外，我们还可以在服务器中设置响应头，让服务器知道允许当前域名的请求。具体来说，我们可以在服务器中添加如下代码：
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
next();
});上述代码中，我们设置了 Access-Control-Allow-Origin、Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 三个响应头，分别用于允许所有域名的请求、允许 Content-Type 请求头和允许 GET、POST、PUT、DELETE 和 OPTIONS 请求方法。
3. 使用 JSONP
JSONP（JSON with Padding）是一种在跨域请求数据时常用的技术，它通过动态创建 <script> 标签并设置 src 属性来实现跨域请求数据。在 PWA 应用中，我们可以使用 JSONP 技术来解决 CORS 问题，具体来说，我们可以在代码中添加如下代码：
// javascriptcn.com 代码示例
function jsonp(url, callback) {
var script = document.createElement('script');
script.src = url + '&callback=' + callback;
document.body.appendChild(script);
}
jsonp('https://api.example.com/data', 'handleData');
function handleData(data) {
console.log(data);
}上述代码中，我们首先定义了一个 jsonp 函数，用于动态创建 <script> 标签并设置 src 属性。然后，我们调用 jsonp 函数请求数据，并设置回调函数 handleData，当数据返回时，回调函数 handleData 将被执行。
总结
在 PWA 应用中，我们经常会遇到跨域请求数据的情况，而当请求的资源与当前应用的源不同时，就会出现 CORS 问题。为了解决这个问题，我们可以使用代理服务器、在服务器中设置响应头或者使用 JSONP 技术。无论使用哪种方式，我们都必须注意安全问题，并且在代码中添加必要的异常处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561049ad2f5e1655db2b75c