【发布时间】：2018-06-15 20:07:54
【问题描述】：
我有一个 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 请求标头，这似乎导致我的 API 服务器不返回 Access-Control-Allow-Origin 响应标头，从而导致浏览器错误：
请求的资源上不存在“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 有一个Request.mode，当设置为'cors' 时，它将像平常一样发送带有Origin 标头的OPTIONS 请求。我会尝试明确设置它，但我无法研究或在文档中找到如何使用角度设置它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？
【问题讨论】：
-
您是否尝试在请求标头中添加“Access-Control-Allow-Origin”，例如“Access-Control-Allow-Origin”、“*”
-
如果您将请求代码添加到问题中会有所帮助 - 但无论如何，请尝试直接使用 Fetch API 发出请求，并使用指定的
mode: 'cors'手动构造请求对象 -
@VithuBati 不是
Access-Control-Allow-Origin响应头不是请求头吗？ -
@sideshowbarker 一些请求是通过 3rd 方库提出的，一些是通过
HttpClient提出的。当所有请求都在没有安装服务工作者的情况下工作并且一旦注册服务工作后所有请求都不再具有通常由浏览器添加的标头时，我认为请求代码不相关。不过我会用例子来更新。 -
@sideshowbarker 我在研究如何使用 Angular HttpClient 设置
mode: 'cors'时遇到问题
标签： angular cors angular-cli service-worker angular-service-worker