Passing data from VueJS to Laravel API

Good day guys,

I am struggling here and have no idea why it's not working... First the code: VueJS:

axios
        .post("api/dnscheck", "werner123.co.za")
        .then(res => {
          console.log(res);
          this.dnsResult = true;
          this.dnsResultMessage = res.data.message;
        })
        .catch(error => console.log(error.data.message));

Controller:

public function dnscheck(Request $request)
    {
        $dnsname = $request->dnsname;
        //have tried
        // $dnsname = $request['dnsname'];
        //and $dnsname = $request->input('dnsname');
        $api_url = 'https://www.whmcs.api';
        $api_identifier = 'xxxx';
        $api_secret = 'xxxx';

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $api_url);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt(
            $ch,
            CURLOPT_POSTFIELDS,
            http_build_query(
                array(
                    'action' => 'DomainWhois',
                    'username' => $api_identifier,
                    'password' => $api_secret,
                    'domain' => $dnsname,
                    'responsetype' => 'json',
                )
            )
        );
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $response = curl_exec($ch);
        curl_close($ch);

        return $response;
    }

Error:

message: "Domain not valid"

If I hardcode the domain name in the controller, it works, so somewhere between VueJS and the Controller, the data doesn't look right and I am not sure how to see what data I am getting from VueJS, eg: dd() doesn't work.

When testing with Postman, it works, no problem.

tykus

6 years ago

Best Answer

Level 104

axios.post("api/dnscheck", "werner123.co.za")

The second argument to the post method should be a data object, e.g.

axios.post("api/dnscheck", {dnsname: "werner123.co.za"})

Then inside the Controller, your following line will work as expected:

$dnsname = $request->dnsname;

wbarnard81

6 years ago

Level 2

Thank you sir. I can see now where my issue was. I wasn't sending an object. Changed it now to the way I wanted and it's working...

export default {
  name: "DNSCheck",
  data() {
    return {
      data: {
        dnsname: ""
      },
      dnsResult: false,
      dnsResultMessage: null
    };
  },
  methods: {
    searchDnsName() {
      axios
        .post("api/dnscheck", this.data)
        .then(res => {
          console.log(res);
          this.dnsResult = true;
          this.dnsResultMessage = res.data.message;
        })
        .catch(error => console.log(error.data.message));
    }
  }
};

Please or to participate in this conversation.