serviceWorker删除源请求标头

Question

我有一个angular应用程序，只要我按照以下步骤添加serviceWorker：

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

…我的API请求不再具有原始请求标头，这似乎导致我的API服务器不返回访问控制允许原始响应标头，从而导致浏览器错误：

请求的资源上不存在“Access Control Allow Origin”标头。

只要删除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我得到：

拒绝设置不安全的标头“Origin”

手动设置Access Control Allow Origin（访问控制允许原点）不起任何作用，因为它是一个响应头。

Fetch API有一个请求。模式当设置为“cors”时，将发送一个带有原始头的请求。我会尝试显式地设置它，但我在研究或在文档中找到如何使用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)));
}

  

太长，读不下去了

注册服务工作者后，浏览器不再使用CORS，即使客户端显式设置了“CORS”模式。如何使用服务人员和CORS？




Answer 1

转到托管API的服务器，并对CORS配置进行以下更改。

从此处更改允许的原点：

<AllowedOrigin>*</AllowedOrigin>

到

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