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

Question

我在 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 请求响应：

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

非常感谢，

Answer 1

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

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

  e.preventDefault();

  [....]
}

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

Strange behaviour on HttpClient call only on Firefox

angular

angular-httpclient