angular - serviceWorker 删除 Origin 请求 header

Question

我有一个 angular 应用程序，一旦我按照以下步骤添加了一个 serviceWorker:

https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md#service-worker
https://angular.io/guide/service-worker-getting-started

…我的 API 请求不再有 Origin请求 header ，这似乎导致我的 API 服务器不返回 Access-Control-Allow-Origin响应头，导致浏览器错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

简单地删除 serviceWorker 并取消注册它会使行为恢复正常。

如何在继续使用我的 Restful API 的同时实现 serviceWorker？

所有请求都受到影响，但有些请求是由 oidc-client 在“幕后”提出的。 ;所有其他的看起来像:

public getBook(bookId: number): Observable<Book> {
  const request = new HttpRequest(
    'get',
    `https://some-server.asurewebsites.net/api/book/${bookId}`,
    {
      reportProgress: true,
      responseType: 'json'
    }
  );
  return this.httpClient.request<any>(request).do(event => {
    this.progressService.processEvent(event);
  }).filter(event => event instanceof HttpResponse)
  .map((response: HttpResponse<any>) => deserializeBook(response.body)).catch(error => {
    if (error instanceof HttpErrorResponse) {
      if (error.status === 404) {
        return Observable.of(null);
      }
    }
    return Observable.throw(error);
  });
}
// note: other constraints require listening to progress from per-request level rather than using a HttpIntercepter. 

更新 1:

手动设置 Origin我得到:

Refused to set unsafe header "Origin"

手动设置 Access-Control-Allow-Origin什么都不做，因为它是一个响应头。

Fetch API 有一个 Request.mode当设置为 'cors'将发送 OPTIONS请求 Origin头像正常。我会尝试明确设置它，但我在研究或在文档中找到如何使用 Angular 设置它时遇到问题 HttpClient
更新 2:

我尝试将请求之一转换为使用 Fetch API。所以我设置了 Request.mode至 'cors' ，但我仍然没有 Origin请求头和没有 Access-Control-Allow-Origin响应头。

public getBookList(): Observable<BookList[]> {
  const fetchHeaders = new Headers();
  fetchHeaders.set('Authorization', 'Bearer ${token}');
  const fetchRequest  = new Request(`https://some-server.asurewebsites.net/api/book`, {
    method: 'get',
    headers: fetchHeaders,
    mode: 'cors'
  });
  return Observable.fromPromise(fetch(fetchRequest).then(response => response.json()))
    .map((results: any[]) => results.map(entity => deserializeBook(entity)));
}

TLDR

注册 Service Worker 后，浏览器不再使用 CORS，即使 mode: 'cors'由客户端明确设置。如何使用 Service Worker 和 CORS？

Answer 1

转到托管 API 的服务器，并对 CORS 配置进行以下更改。
从此更改允许的来源:

<AllowedOrigin>*</AllowedOrigin>

到

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>