Search code examples
angularangular-httpclient

Strange behaviour on HttpClient call only on Firefox

I'm facing a weird problem in an Angular 6 application and a call to a backend function. Basically, I want to add an object to a list and save it to the DB. It has been working perfectly until today, when I detected an strange behaviour on Firefox (on Chrome and Opera it works).

To save the object to the DB, the app calls this method:

 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));
}

On the server logs, I can see that the request is done properly:

[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"

And it saves the object to the DB, so it works. But, on Firefox, I can see this error on the console (translated from Spanish, so it will be a little different in English):

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).

And I can see an unexpected GET request on Firefox network tab:

Firefox network request

The same operation on Chrome or Opera works fine. Also, I haven't seen this error elsewhere in the application. Also I tried on different computers, and changing the backend to the production server and the result is the same.

EDIT

Here is the OPTIONS request response:

OPTIONS response

Any clue on what can be the reason?

Many thanks,

Solution

  • The problem hadn't anything to do with Angular or HttpClient module. It was related to the way Firefox handles DnD events. Apparently, Firefox was treating the dragged object as a link, so it was trying to open it when I dropped it into one of the containers. To fix this behaviour, all I have done is adding this line on the drop event handler:

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

  e.preventDefault();

  [....]
}