service worker拦截https请求修改为http请求

最新推荐文章于 2024-05-15 15:35:59 发布

觳鸋鰝

最新推荐文章于 2024-05-15 15:35:59 发布

阅读量384

点赞数 4

文章标签： http 网络协议网络

本文链接：https://blog.csdn.net/weixin_44962234/article/details/137790661

版权

Service Worker 技术

Service Worker 是一种在浏览器后台运行的脚本，可以拦截和处理页面发出的网络请求。

service-worker.js


//然后在service worker的脚本（service - worker.js）中，你可以监听fetch事件：
self.addEventListener('fetch', function (event) {
    // 阻止默认的fetch行为
    event.respondWith(
        // 自定义处理逻辑
        new Promise(function (resolve, reject) {
            // 在这里添加你的逻辑
            console.log('Request intercepted:', event.request.url);
            // 修改请求的URL
            var url = event.request.url;
            if (event.request.url.startsWith("https://")) {
                url = "http://" + url.substring(8);
            }
            const modifiedUrl = new URL(url);
            //modifiedUrl.pathname = url; // 修改想要的路径
            // 使用fetch获取响应
            fetch(modifiedUrl).then(
                function (response) {
                    // 可以在这里修改响应
                    resolve(response);
                },
                function (error) {
                    reject(error);
                }
            );
        })
    );
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>serviceWorker</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
   <script>
     if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js')
            .then(function (registration) {
                console.log('Service Worker 注册成功:', registration.scope);
            })
            .catch(function (error) {
                console.log('Service Worker 注册失败:', error);
            });
    }

   </script>
</body>
</html>