SignIn = () => {
    console.log('login clicked')
    let data = JSON.stringify({
        password: this.state.password,
        username: this.state.email
    })

    axios.post('url', data, {
        headers: {
            'Content-Type': 'application/json',
        }
    }
    )
}

By default Axios has excellent request body handling.

• If it sees a plain JavaScript object or array, it uses application/json.
• If you pass in a plain string or an instance of URLSearchParams, it uses application/x-www-form-urlencoded.
• Pass in a FormData instance and it will use multipart/form-data

So why are there endless questions on Stack Overflow with customised content-type headers? I'd even go so far as to argue that unless your APIs are using proper content negotiation, you don't need to mess with the Accept header either.

I see no need for an interceptor in your case. Simply set the request header defaults on your instance

axiosApi.defaults.headers.common["X-Client"] = "React";
// and if your API actually uses content negotiation...
// axiosApi.defaults.headers.common.Accept = "application/json";

As for your url-encoded request, Axios 0.x supports this via URLSearchParams or a plain string. It will not automatically convert a plain object into application/x-www-form-urlencoded.

If your data is a flat object, you can use the following

const form = async (url, data) => {
  const encodedData = new URLSearchParams(data);
  return (await axiosApi.post(url, encodedData)).data;
};

If it's more complex, I would recommend using a library like qs.

Otherwise, wait for Axios 1.0 where you can apparently use this

axios.post(url, data, {
  headers: { "content-type": "application/x-www-form-urlencoded" }
});