Headers to axios post request treated as params

Question

I tried implement logout function with axios post in vue. I add the jwt to request headers, but it treated as params. In another function, i implement axios post method and it works. Anybody can help ? This is the code :

import axios from 'axios';
import store from '../store';

const API = 'http://192.168.100.184:5000/api/v1.0.0';
export class APIService{
   constructor(){
   }
   login (userData) {
     return axios.post(`${API}/auth/`, userData);
    }
    logout(){
      const url = `${API}/auth/logout`;
      const headers = {"api_token": store.state.jwt};        
      return axios.post(url,{headers:headers});
    }
    createUser(user){
      const headers = {"api_token": store.state.jwt};
      const url = `${API}/user/`;
      return axios.post(url,user,{headers: headers});
    }
 }

when i see the network, in the request headers of createUsermethod there api_token field and it success. But in request headers of logout method there no api_token field, the api_token is found in the params and it looks like :

headers{…}
   api_token : xxxxxxxx

the response say error with status code 400.

skirtle skirtle · Accepted Answer · 2019-08-16T06:05:48

This:

return axios.post(url,{headers:headers});

should be this:

return axios.post(url, null, {headers: headers});

The second parameter must be the request body, the third parameter is for other options such as the headers.

Headers to axios post request treated as params

1 Answers