Why is the request not being sent to the server?

Question

JavaScript

There is a small application on React, functionality: registration of new users and password recovery. Everything is ok with registration (on the local and remote server), but the password reset does not work.
On the local server, when submitting the form, the following happens:
First I get 404:

POST https://api.com/v3/users/recovery-password 404 ()

Then an alert with the following content (provided that the data is entered correctly): If we talk about the same application on a remote server, then nothing happens when submitting the form. The network tab is empty, the console too. Actually the part of the code that is responsible for sending:
{"code":113,"message":"User not found"}

onSubmit(ev) {
ev.preventDefault()

let vals = this.state.vals

for ( let key in vals) {
  if ( vals.hasOwnProperty(key) && vals[key] === null ) {
    $( "form input:visible" ).each( function() {
        if (!$(this).val()){
          $(this).addClass( 'has-error' )
        }
    } )
    if ( ( !( key === 'name' || key === 'password' ) ) && ( $( 'body' ).hasClass( 'recover-page' ) ) ) {
      return false
    }
  }
}

if ( Object.keys( vals ).some( key => vals[ key ] === null ) ) return

this.setState( { class: "form loading" } )

let bThis = this

if ( $( 'body' ).hasClass( 'recover-page' ) ) {

  const data = {
    email: vals.email,
    platformName: vals.domain
  };

  const boundary = String(Math.random()).slice(2);
  const boundaryMiddle = '--' + boundary + '\r\n';
  const boundaryLast = '--' + boundary + '--\r\n'

  let body = ['\r\n']

  Object.keys( data ).forEach( key => {
    body.push( 'Content-Disposition: form-data; name="' + key + '"\r\n\r\n' + data[key] + '\r\n' );
  } )

  body = body.join( boundaryMiddle ) + boundaryLast

  const xhr = new XMLHttpRequest()

  xhr.open('POST', 'https://api.com/v3/users/recovery-password', true)

  xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary)

  xhr.onreadystatechange = function() {
    if ( this.readyState !== 4 ) return

    if( this.responseText === 'null' ){

      bThis.setState({class: "form recoverSuccess"} )

    } else {
      alert(this.responseText)
    }
  }

  xhr.send(body);

  return false
}

this.sendReq(vals)

}

Also an attempt to ping hosting with api - a screenshot of the terminal

Answer 1

By mistake: since you got a 404, you should start by checking the existence of such a route on the server. Until you have a working request via console/postman - there's no point in trying on the client.
ps Why is the jQuery approach and working with DOM + React mixed in the code? Just some crutch out of necessity or does it seem normal?