How to POST (and not GET) using Vue.js Axios and URLSearchParams

Applications Web Development
1

After days of struggle with examples on the net I had Googled so much that all my links were purple.

It turns out that there is some problem in Axios for Vue.js and the documentation and examples on 99.342 percent of the web tutorial sites are wrong. This leads me to believe that there are a lot of "cut-and-paste" tutorials and "experts" out there in netland (especially true on Stack Exchange, so I have seen recently).

Anyway, to make a long story, short. Here is the proper way to create a POST request using Axios:

CORRECT:

async function login() {
  let isValidForm = await this.$validator.validateAll();
  if (!this.user.login_username || !this.user.login_password) {
    this.login_status = true;
    this.status = "All Login Fields Are Required";
    return false;
  } else if (!isValidForm) {
    return false;
  }
  this.status = "Processing Login ...";
  this.login_status = true;
  const url = "https://www.examplesite.com/dothelogin.php";

  const params = new URLSearchParams();
  params.append("login_username", this.user.login_username);
  params.append("login_password", this.user.login_password);
  params.append("cookieuser", 1);
  params.append("do", "login");
  params.append("version", this.$store.state.version);

  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  this.axios.post(url, params).then(
    response => {
      this.$store.commit("setloginstatus", response.data);
      if (response.data.status == "success") {
        this.login_status = true;
        this.status = "Login Success";
        window.open(success, "_self");
      } else if (response.data.status == "badlogin_strikes") {
        this.login_status = true;
        this.status = "Login Failure, Please try again!";
      } else {
        this.login_status = true;
        this.status = "Login Failure, Please try again!!";
      }
    },
    error => {
      console.log(error);
      this.login_status = true;
    }
  );
}

DOCUMENTED BUT INCORRECT:

async function login() {
  let isValidForm = await this.$validator.validateAll();
  if (!this.user.login_username || !this.user.login_password) {
    this.login_status = true;
    this.status = "All Login Fields Are Required";
    return false;
  } else if (!isValidForm) {
    return false;
  }
  this.status = "Processing Login ...";
  this.login_status = true;
  const url = "https://www.examplesite.com/dothelogin.php";

  const params = {
  login_username: this.user.login_username,
  login_password: this.user.login_password,
  cookieuser: "1",
  version:  this.$store.state.version,
  do: "login"
  };


  const config = {
    headers: {
      //"Content-Type": "application/x-www-form-urlencoded"
      "Content-Type": "application/json"
    }
  };
  this.axios.post(url, params).then(
    response => {
      this.$store.commit("setloginstatus", response.data);
      if (response.data.status == "success") {
        this.login_status = true;
        this.status = "Login Success";
        window.open(success, "_self");
      } else if (response.data.status == "badlogin_strikes") {
        this.login_status = true;
        this.status = "Login Failure, Please try again!";
      } else {
        this.login_status = true;
        this.status = "Login Failure, Please try again!!";
      }
    },
    error => {
      console.log(error);
      this.login_status = true;
    }
  );
}

The problem is that this code, which works for GET, will not work for POST:

  const params = {
  login_username: this.user.login_username,
  login_password: this.user.login_password,
  cookieuser: "1",
  version:  this.$store.state.version,
  do: "login"
   };

However, I could get the "not working" method above to work (POST) only if I changed the content-type:

"Content-Type": "application/x-www-form-urlencoded"

But in Axios, this mangles the JSON POST data so much that I had to write some very kludgy PHP string processing code to get the very mangled POST request string converted to a proper, and useable, $_POST array.

Note: I was going to post the "mangled POST processing PHP code" but I deleted that code out of my script when I finally got the POST request to work and am lazy to go to GitHut and retrieve that "bad code" from the repo, LOL

So, if I use the URLSearchParams() method to create the POST params (not in the docs on Vue.js or Axios), it works fine, 'POST, ing' as JSON.

  const params = new URLSearchParams();
  params.append("login_username", this.user.login_username);
  params.append("login_password", this.user.login_password);
  params.append("cookieuser", 1);
  params.append("do", "login");
  params.append("version", this.$store.state.version);

There are 100s of wrong Axios POST examples tutorials on the net and the documentation is also incorrect because the documentation shows the POST and GET request using the same param object for both POST and GET, but that will not work and I had to dissect every step of the client-server POST process from the JS inside Axios to the heart of PHP HTTP request processing to find the solution. What a waste of time, LOL.....

To help anyone else who is using Axios in Vue.js , I post this correct example solution for the Axios POST method so to help anyone who might struggle for hour and hours to debug and get a mangled Axios POST request to work. Just use URLSearchParams() and save yourself days of time.

4 Likes