angular - Authentication Error: Response for preflight has invalid HTTP status code 405

Question

I want to implement authentication. Actually, my project is being built in Angular 2 Beta, but I'm using this authentication sample for testing purposes. I have own API, and just added its url to this sample project. It didn't work) It shows this error:

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
Fetch API cannot load http://blah-blah-blah. Response for preflight has invalid HTTP status code 405

Here is the login method:

login(event, phone, password) {
event.preventDefault();
window.fetch('http://blah-blah-blah', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    phone, password
  })
})
.then(status)
.then(json)
.then((response:any) => {
  localStorage.setItem('access_token', response.id_token);
  this.router.parent.navigateByUrl('/home');
})
.catch((error) => {
  alert(error.message);
  console.log(error.message);
});
}

Answer 1

It looks like you are trying to make a cross domain AJAX call. For this to work your remote server API must support CORS. The pre-flight request is a special request that the browser sends using the OPTIONS verb prior to making the actual POST request:

OPTIONS http://blah-blah-blah

The server must respond with a normal 200 status code and include the proper CORS headers indicating which domains are allowed to make requests to it. Only after that the actual POST request will be sent.

The problem with your API is that the endpoint returned 405 Not Allowed status code to this OPTIONS request. So you will need to fix your API so that it supports the OPTIONS verb.