OPTIONS (failed) only on Chrome and Firefox

Question

I make a POST request and the request just sits, pending until it eventually fails. I've monitored the nginx logs and the node server logs and the request doesn't even register. This works for anyone else that I've had test it except one other colleague. If I use the edge browser or a different computer it works fine.

I have attempted to make POST requests to other (custom) servers and it hangs on options there as well. I have also made the POST request with jQuery and it fails the same way.

It's maybe worth noting that I am using the withCredentials flag.

Headers:

Provisional headers are shown
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:GET
Origin:http://localhost:8080
Referer:http://localhost:8080/<path>
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36

The request:

  public login(user) {
    const endpoint = `http://<url>`;

    let headers = new Headers();
    headers.append('Content-type', 'application/json');

    return this.http
      .post(endpoint, JSON.stringify(user), {
        headers: headers,
      });

  }

I subscribe to the call in my component:

this._accountService.login(this.user)
        .subscribe(res => {
            console.log("logged in!");
            if (res.json().status === "success") {
                window.location.href = `/home/${this.org}/${this.product}`;
            }
            else {
                // What other options are there?
                console.log("Do something else maybe?");
            }
        },
        err => {
            this.invalidLogin = true;
            console.log("Ye shall not pass!");
        });

Successful user's headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:<url>
Origin:<url>
Referer:<url>
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.33 Safari/537.36

From chrome://net-internals/#events

t=61869793 [st=    0] +REQUEST_ALIVE  [dt=60162]
                       --> has_upload = false
                       --> is_pending = true
                       --> load_flags = 34624 (DO_NOT_SAVE_COOKIES | DO_NOT_SEND_AUTH_DATA | DO_NOT_SEND_COOKIES | MAYBE_USER_GESTURE | VERIFY_EV_CERT)
                       --> load_state = 14 (WAITING_FOR_RESPONSE)
                       --> method = "OPTIONS"
                       --> net_error = -1 (ERR_IO_PENDING)
                       --> status = "IO_PENDING"
                       --> url = "<url>"
t=61929955 [st=60162]   -HTTP_STREAM_PARSER_READ_HEADERS
                         --> net_error = -324 (ERR_EMPTY_RESPONSE)
t=61929955 [st=60162]   -HTTP_TRANSACTION_READ_HEADERS
                         --> net_error = -324 (ERR_EMPTY_RESPONSE)
t=61929955 [st=60162]   -URL_REQUEST_START_JOB
                         --> net_error = -324 (ERR_EMPTY_RESPONSE)
t=61929955 [st=60162]    URL_REQUEST_DELEGATE  [dt=0]
t=61929955 [st=60162] -REQUEST_ALIVE
                       --> net_error = -324 (ERR_EMPTY_RESPONSE)

I'm really guessing this is related to something that is cached in my browser(s) but I really cannot find what. I've cleared all cookies and anything that could be stored. Where else can I check to clear things? This is clearly something local to my computer/browser (and one other unfortunate person).

Answer 1

Please try to subscribe() to the observable.

return this.http
  .post(endpoint, JSON.stringify(user), {
    headers: headers,
  }).subscribe(() => console.log("POST done!"));