Service Worker: Nối tiêu đề vào các yêu cầu cho các tệp CSS & JS

Tôi đã cố gắng sử dụng nhân viên dịch vụ cho (có vẻ như giờ & giờ), để đính kèm một tiêu đề đơn giản cho tất cả các yêu cầu. Những gì bực bội là, nó loại công việc.

Nỗ lực 1:

self.addEventListener("fetch", event => {
   const modifiedHeaders = new Headers({
      ...event.request.headers,
      'API-Key': '000000000000000000001'
   });
   const modifiedRequest = new Request(event.request, {
      headers: modifiedHeaders,
   }); 
   event.respondWith((async () => {
     return fetch(modifiedRequest);
   })());
});

Đoạn mã trên hoạt động cho các tệp HTML tuy nhiên đối với các tệp CSS & JS tôi gặp lỗi sau

ReferenceError: tiêu đề không được xác định

Nếu tôi tắt yêu cầu tiêu đề, trang sẽ tải hình ảnh và javascript và tôi có thể tương tác với nó như bình thường.

Cố gắng 2:

var req = new Request(event.request.url, {
   headers: {
     ...event.request.headers,
      'API-Key': '000000000000000000001'
      },
   method: event.request.method,
   mode:  event.request.mode,
   credentials: event.request.credentials,
   redirect: event.request.redirect,
   referrer: event.request.referrer,
   referrerPolicy: event.request.referrerPolicy,
   bodyUsed: event.request.bodyUsed,
   cache: event.request.cache,
   destination: event.request.destination,
   integrity: event.request.integrity,
   isHistoryNavigation: event.request.isHistoryNavigation,
   keepalive:  event.request.keepalive
 });

Nỗ lực này, tôi chỉ đơn giản xây dựng một yêu cầu mới, bao gồm thành công tiêu đề mới trên các yêu cầu tệp CSS & JS. Tuy nhiên, khi tôi thực hiện POST hoặc chuyển hướng, mọi thứ sẽ ngừng hoạt động và hoạt động lạ.

Cách tiếp cận chính xác cho điều này là gì? Tôi cảm thấy rằng nỗ lực 1 là con đường tốt hơn, nhưng dường như tôi không thể tạo đối tượng Tiêu đề theo yêu cầu bất kể tôi làm gì.

Phiên bản chrome tôi đang sử dụng là

Phiên bản 78.0.3904,70 (Bản dựng chính thức) (64-bit)

Trang web là một công cụ dành cho nhà phát triển nội bộ nên không yêu cầu khả năng tương thích trình duyệt chéo. Vì vậy, tôi rất vui khi tải bất kỳ libs bổ sung / kích hoạt các tính năng thử nghiệm, v.v.

Vấn đề là các yêu cầu sửa đổi của bạn sử dụng lại yêu cầu modeban đầu trong cả hai lần thử của bạn

Đối với các tài nguyên được nhúng trong đó yêu cầu được bắt đầu từ đánh dấu (trừ khi có thuộc tính crossorigin), yêu cầu trong hầu hết các trường hợp được thực hiện bằng no-corschế độ chỉ cho phép một bộ tiêu đề đơn giản cụ thể rất hạn chế .

no-cors - Ngăn không cho phương thức trở thành bất kỳ thứ gì khác ngoài Head, GET hoặc POST và các tiêu đề không phải là bất cứ thứ gì khác ngoài các tiêu đề đơn giản. Nếu bất kỳ ServiceWorkers nào chặn các yêu cầu này, họ không thể thêm hoặc ghi đè bất kỳ tiêu đề nào ngoại trừ những tiêu đề đơn giản ...

Nguồn và thông tin thêm về các chế độ yêu cầu: https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

Các tiêu đề đơn giản là các tiêu đề sau: accept(chỉ một số giá trị) accept-language,, content-language(chỉ một số giá trị) , content-type.

Nguồn: https://fetch.spec.whatwg.org/#simple-header :

Giải pháp:

Bạn cần đảm bảo đặt chế độ thành một cái gì đó khác với no-corskhi tạo yêu cầu sửa đổi. Bạn có thể chọn một trong hai corshoặc same-origin, tùy thuộc vào việc bạn muốn cho phép yêu cầu cross-xứ. ( navigateChế độ chỉ dành riêng cho điều hướng và không thể tạo yêu cầu với chế độ đó.)

Tại sao mã của bạn hoạt động cho các tệp HTML:

Yêu cầu được đưa ra khi điều hướng đến một trang mới sử dụng navigatechế độ. Chrome không cho phép tạo các yêu cầu với chế độ này bằng cách sử dụng hàm new Request()tạo, nhưng dường như tự động âm thầm sử dụng same-originchế độ khi một yêu cầu hiện có với navigatechế độ được chuyển đến hàm tạo như một tham số. Điều này có nghĩa là yêu cầu sửa đổi (tải HTML) đầu tiên của bạn có same-originchế độ, trong khi các yêu cầu tải CSS và JS có no-corschế độ.

Ví dụ làm việc:

'use strict';

/* Auxiliary function to log info about requests to the console */
function logRequest(message, req) {
  const headersString = [...req.headers].reduce((outputString, val) => `${outputString}\n${val[0]}: ${val[1]}`, 'Headers:');
  console.log(`${message}\nRequest: ${req.url}\nMode: ${req.mode}\n${headersString}\n\n`);
}


self.addEventListener('fetch', (event) => {
  logRequest('Fetch event detected', event.request);

  const modifiedHeaders = new Headers(event.request.headers);
  modifiedHeaders.append('API-Key', '000000000000000000001');

  const modifiedRequestInit = { headers: modifiedHeaders, mode: 'same-origin' };
  const modifiedRequest = new Request(event.request, modifiedRequestInit);

  logRequest('Modified request', modifiedRequest);

  event.respondWith((async () => fetch(modifiedRequest))());
});

Tôi sẽ thử điều này:

self.addEventListener("fetch", event => {
    const modifiedRequest = new Request(event.request, {
        headers: {
            'API-Key': '000000000000000000001'
        },
    }); 
    event.respondWith((async () => {
        return fetch(modifiedRequest);
    })());
});