如何解决 PWA 中 Service Worker 请求 API 跨域的问题
前言
随着 PWA 技术的不断发展，越来越多的 Web 应用程序借助 Service Worker 技术实现离线缓存、消息推送、网络代理等高级应用功能。但是，在实际的应用过程中，我们经常会面对 Service Worker 请求 API 跨域的问题，这让我们的实现过程变得更加复杂和困难。本文就结合实际应用场景，讲解如何解决 PWA 中 Service Worker 请求 API 跨域的问题。
解决方案
前端请求跨域一般有以下几种方式：
- JSONP 跨域请求
- CORS 跨域资源共享
- 代理服务器转发
- postMessage 跨域通信
- JSONP 跨域请求
JSONP 是一种利用 script 标签实现跨域请求的方式。由于 script 标签的 src 属性是不受同源策略限制的，所以可以利用这一点来实现跨域请求，同时还需要一个回调函数作为参数将请求结果传递回去。
下面是一个简单的示例：
// 注册 service worker，并在 install 事件中注册 fetch 事件监听器 self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/app.js' ]); }) ); });
// 监听 fetch 事件，并通过 JSONP 方式请求数据 self.addEventListener('fetch', function(event) { var url = event.request.url; if (url.indexOf('https://api.example.com/data') !== -1) { event.respondWith( fetch('https://api.example.com/data?callback=getData', { mode: 'no-cors' }).then(function(response) { return response.text(); }) .then(function(text) { var regex = /^getData((.*))$/; var matches = regex.exec(text); if (matches.length > 1) { return new Response(matches[1], { headers: { 'Content-Type': 'application/json' } }); } else { return new Response('', { status: 500, statusText: 'JSONP call failed' }); } }) ); } else { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } });
需要注意，由于 JSONP 的缺陷比较明显，即只能通过 get 请求方式来请求数据，并且并不支持 error 或者超时等错误处理，所以在实际应用中，尽量要避免采用这种方式。
- CORS 跨域资源共享
CORS 是一种标准的跨域请求方式，通过在服务端设置 Access-Control-Allow-Origin 响应头，让浏览器知道当前的请求可以被哪些域名所访问。
下面是一个简单的示例：
// 注册 service worker，并在 install 事件中注册 fetch 事件监听器 self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/app.js' ]); }) ); });
// 监听 fetch 事件，并通过 CORS 方式请求数据 self.addEventListener('fetch', function(event) { var url = event.request.url; if (url.indexOf('https://api.example.com/data') !== -1) { event.respondWith( fetch(event.request, { mode: 'cors' }) .then(function(response) { return response; }) .catch(function(error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, statusText: error.message }); }) ); } else { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } });
需要注意，CORS 方式除了服务端要设置相关的 Access-Control-Allow-Origin 响应头之外，还需要浏览器支持。传统的服务端处理方式是在服务端定义的请求头里指定相关的 CORS 请求头，但 PWA 应用中 Service Worker 是无法修改客户端请求头的，所以需要在客户端发送请求时启用 mode 属性设置为 'cors'。
- 代理服务器转发
代理服务器主要是通过在服务端对请求进行转发，从而绕过浏览器同源限制的问题。由于 Service Worker 监听的是浏览器客户端请求事件 fetch，所以需要在客户端中对代理请求做相应的处理。
下面是一个简单的示例：
// 注册 service worker，并在 install 事件中注册 fetch 事件监听器 self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/app.js' ]); }) ); });
// 监听 fetch 事件，并通过代理服务器转发请求数据 self.addEventListener('fetch', function(event) { var url = event.request.url; if (url.indexOf('https://api.example.com/data') !== -1) { event.respondWith( fetch('/api/data') .then(function(response) { return response; }) .catch(function(error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, statusText: error.message }); }) ); } else { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } });
需要注意，代理服务器转发的请求绕过了浏览器的同源策略，具备一定的安全风险。同时，由于代理服务器一般都会代理大量的请求，如果协议或者服务器地址等修改，可能需要修改大量的代码，且在运维方面也需要做好相应的规划和管理。
- postMessage 跨域通信
postMessage 是 HTML5 标准定义的一种跨域通信方式，可以在父子页面、同源 iframe 之间进行通信。Service Worker 监听 fetch 事件时，可以通过 postMessage 启动一个 iframe 静默后台请求 API 返回数据，同时在 onmessage 回调函数中将请求结果传递回去。
下面是一个简单的示例：
// 注册 service worker，并在 install 事件中注册 fetch 事件监听器 self.addEventListener('install', function(event) { event.waitUntil( caches.open('my-cache').then(function(cache) { return cache.addAll([ '/', '/index.html', '/app.js' ]); }) ); });
// 监听 fetch 事件，并通过 postMessage 方式请求数据 self.addEventListener('fetch', function(event) { var url = event.request.url; if (url.indexOf('https://api.example.com/data') !== -1) { event.respondWith( new Promise(function(resolve, reject) { var messageChannel = new MessageChannel(); messageChannel.port1.onmessage = function(event) { var result = JSON.parse(event.data); if (result && result.status === 'success') { resolve(new Response(result.data, { headers: { 'Content-Type': 'application/json' } })); } else { reject(new Response('', { status: 500, statusText: 'postMessage call failed' })); } }; navigator.serviceWorker.controller.postMessage({ api: 'https://api.example.com/data', method: 'get' }, [messageChannel.port2]); }) ); } else { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); } });
需要注意，postMessage 方式需要 Service Worker 安全域名 和页面域名相同，且在 API 请求的时候需要通过静默后台 iframe 请求。同时，在浏览器发送 postMessage 时，需要自行选择兼容性最好的 API 进行操作，这里推荐使用 BroadcastChannel。
总结
以上就是 PWA 中 Service Worker 请求 API 跨域问题的解决方案。在实际应用中，我们需要根据具体的业务场景和安全规范选用合适的方式，从而在保证功能实现的同时也要提高安全性。
引用资料
- JSONP is still good: How to easily solve Service Workers' CORS limitations
- Service Worker and CORS
- Understanding Service Workers in PWA – Part 3
参考代码
- JSONP 示例代码
- CORS 示例代码
- 代理服务器转发 示例代码
- postMessage 示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3367683d39b488172e25f