javascript - 服务人员没有从请求中获取正文

标签 javascript typescript service-worker

所以我有一个用于获取的 service worker:

self.addEventListener('fetch', (event) => {
    const requestProcessor = (idToken) => {
        let req = event.request;
        // For same origin https requests, append idToken to header.
        if ((self.location.protocol === 'https:' ||
            self.location.hostname === 'localhost') &&
            idToken) {

            // Clone headers as request headers are immutable.
            const headers = new Headers();
            for (let entry of req.headers.entries()) {
                headers.append(entry[0], entry[1]);
            }

            // Add ID token to header.
            headers.append('Authorization', self.location.origin === getOriginFromUrl(event.request.url) ? `Bearer ${idToken}` : idToken);
            try {
                req = new Request(req.url, {
                    method: req.method,
                    headers: headers,
                    mode: self.location.origin === getOriginFromUrl(event.request.url) ? 'same-origin' : req.mode,
                    credentials: req.credentials,
                    cache: req.cache,
                    redirect: req.redirect,
                    referrer: req.referrer,
                    body: req.body,
                    bodyUsed: req.bodyUsed,
                    context: req.context
                });
            } catch (e) {
                console.error(e);
            }
        }

        return fetch(req);
    };

    event.respondWith(getIdToken().then(requestProcessor));
});

它在另一个文件中被这样调用:

export const makePostRequest = (url = '', params = {}) => {
    return fetch(url, {
        method: 'POST',
        body: JSON.stringify(params),
        headers: {
            'Content-type': 'application/json'
        }
    }).then((res) => res).catch((err) => console.log(err));
};

出于某种原因,req.body 在 service worker 中始终未定义。此外,看起来提取请求发生了两次。当我设置断点并单步执行代码时,我可以看到服务 worker 没有从提取中获取任何内容。我不明白。

最佳答案

好的,所以这并不明显。所以经过一些研究,这解决了我的问题:

self.addEventListener('fetch', (event) => {
    if (getOriginFromUrl(event.request.url) === 'https://app.example.com') {
        const requestProcessor = (idToken) => {
            let newRequest = null;

            // For same origin https requests, append idToken to header.
            if ((self.location.protocol === 'https:' || self.location.hostname === 'localhost') && idToken) {
                try {
                    newRequest = new Request(event.request, {
                        headers: new Headers({
                            ...event.request.Headers,
                            'Content-Type': 'application/json',
                            Authorization: 'Bearer ' + idToken,
                        })
                    })
                } catch (e) {
                    console.log(e);
                }
            }

            return fetch(newRequest);
        };

        /*  Fetch the resource after checking for the ID token.
            This can also be integrated with existing logic to serve cached files
            in offline mode.*/
        event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
    }
});

我还必须设置模式:

export const makePostRequest = (url = '', params = {}) => {
    return fetch(url, {
        method: 'POST',
        mode: 'cors',
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify(params)
    }).then((res) => res).catch((err) => console.log(err));
};

有两个问题:

  1. 默认情况下,header 的模式设置为no-cors。根据a previous SO回答,我必须将 mode 设置为 cors 以允许包含 body 的非基本 header 。
  2. 另一个问题与 headers 不可变有关。必须对此进行更改才能正确复制。

关于javascript - 服务人员没有从请求中获取正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57583086/

相关文章:

typescript - X 类型的参数不能分配给 Y 类型的参数。对象文字只能指定已知属性,并且 X 在类型 Y 中不存在

javascript - 如何从 Service Worker 发送 "offline"消息?

javascript - <select> 上的更改事件

java - 如何重置 Eclipse 工作区的 View

angular - "tsc.exe"以代码 1 退出

service-worker - 手动重放由 workbox-background-sync 排队的请求

javascript - PHP 成功的 webpush 未触发 SW 中的推送事件监听器

javascript - child_process exec 命令被多次执行

javascript - ReactJS 和 material-ui

typescript - TypeScript 中泛型子类型的推断