Send 2 ajax POST request on single click

Question

logout(){
  var destroySession='{"token":"'+this.token+'"}'
  console.log("Session Destroy"+destroySession)
  axios.post(eventBus.apiURL+'logout',{
    headers: {
      'Content-type': 'application/json',
    },
    body: destroySession,
  }).then(response=>{
    console.log("RESadas :: "+JSON.stringify(response.data))        
    alert("Logout successfully..!")
    this.$router.push('/')       
  },error=>{
    console.log(error);
    alert("Some Issue for LogOut at Server Side..!")
    
  });
 

  window.localStorage.removeItem('token')
  window.localStorage.removeItem('name')
  this.$router.push('/')
}

<button @click="logout">Logout</button>

I have written a code for logout in vuejs, but at the time of click it sends two POST request and during session destroy problem occurs at server side.

So you want to send 2 requests to the server or you have a problem because 2 requests are being send to the server? If it is the latter you could add the attribute 'disabled' to the button when the first request begins. — Sotiris Kiritsis, Jul 04 '17 at 06:22

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

As per Mozilla Developer Network,

Preflight Requests

Unlike “simple requests” (discussed above), "preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

In particular, a request is preflighted if any of the following conditions is true:

If the request uses any of the following methods:

Put

DELETE

CONNECT

OPTIONS

TRACE

PATCH

Or if, apart from the headers set automatically by the user agent (for example, Connection, User-Agent, or any of the other header with a name defined in the Fetch spec as a “forbidden header name”), the request includes any headers other than those which the Fetch spec defines as being a “CORS-safelisted request-header”, which are the following:

Accept

Accept-Language

Content-Language

Content-Type (but note the additional requirements below)

DPR

Downlink

Save-Data

Viewport-Width

Width

Or if the Content-Type header has a value other than the following:

application/x-www-form-urlencoded

multipart/form-data

text/plain

Updated

Please read this answer on how to disable preflight requests: Link

Your function is only sending one post request. First one is just a check that the post request is safe to send. — Shubham Patel, Jul 04 '17 at 09:00
If you see the second request than you will come to know that the request data is being sent on that request only. — Shubham Patel, Jul 04 '17 at 09:02
how can I avoid that preflight request? is their any way to avoid this request for the POST method — ASD, Jul 08 '17 at 09:38

Send 2 ajax POST request on single click

1 Answers1