时间戳

首页 > 解决方案 > HttpClient 调用的奇怪行为仅在 Firefox 上

angular - HttpClient 调用的奇怪行为仅在 Firefox 上

问题描述

我在 Angular 6 应用程序和对后端函数的调用中遇到了一个奇怪的问题。基本上，我想将一个对象添加到列表中并将其保存到数据库中。它一直运行良好，直到今天，当我在 Firefox 上检测到一个奇怪的行为（在 Chrome 和 Opera 上它可以工作）。

要将对象保存到数据库，应用程序调用此方法：

 newPolicyObject(listId : number, object : any, objectType : string) {
    let url = `${ConfigService.settings.appURL}/policy-r__ipobjs/policy-r__ipobj/${listId}`;

    return this.httpClient
        .post(url, JSON.stringify(object))
        .pipe(catchError(this.handleError));
}

在服务器日志上，我可以看到请求已正确完成：

[2018-09-27T10:51:29.165] [INFO] http - 127.0.0.1 - - "OPTIONS /policy-r__ipobjs/policy-r__ipobj/7 HTTP/1.1" 204 0 "" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0"
[2018-09-27T10:51:29.258] [INFO] http - 127.0.0.1 - - "POST /policy-r__ipobjs/policy-r__ipobj/7 HTTP/1.1" 200 194 "http://localhost:4200/dashboard/policy" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0"

并将对象保存到数据库中，因此可以正常工作。但是，在 Firefox 上，我可以在控制台上看到这个错误（翻译自西班牙语，所以在英语中会有所不同）：

Blocked cross origin request: The same origin policy doesn't allow reading of remote resources on http://localhost:3000/policy-r__ipobjs/policy-r__ipobj/7. (Reason: CORS request failed).

我可以在 Firefox 网络选项卡上看到一个意外的 GET 请求：

火狐网络请求

Chrome 或 Opera 上的相同操作可以正常工作。此外，我还没有在应用程序的其他地方看到这个错误。我也在不同的计算机上尝试过，将后端更改为生产服务器，结果是一样的。

编辑

这是 OPTIONS 请求响应：

选项响应

关于可能是什么原因的任何线索？

非常感谢，

标签： angularangular-httpclient

解决方案

该问题与 Angular 或 HttpClient 模块无关。这与 Firefox 处理 DnD 事件的方式有关。显然，Firefox 将拖动的对象视为链接，因此当我将其放入其中一个容器时，它试图打开它。drop为了解决这个问题，我所做的就是在事件处理程序上添加这一行：

onDrop(e: DragEvent) {
  [....]

  e.preventDefault();

  [....]
}

推荐阅读