Vuejs get request from PHP/MySQL doesn't work

Question

I am writing code to get data from MySQL database and using Vuejs,

this.$http.get("api.php?action=read")
        .then(response => {
          console.log(response);
        }, error => {
          console.log(error);
        });

this request returns all api.php content and doesn't return the data.

here is the api.php file

<?php

  require_once('include/config.php');

  $res = (['error' => false]);

  $action = 'read';

  if (isset($_GET['action'])) {
    $action = $_GET['action'];
  }

  if($action == 'read') {
      $images = array();

      $query = 'SELECT * FROM images ORDER BY id DESC';
      $select_images = mysqli_query($connection, $query);
      while($image = mysqli_fetch_assoc($select_images)) {
        array_push($images, $image);
      }
      echo json_encode($images);
  }

  mysqli_close($connection);
  header("Content-type: application/json");
  echo json_encode($images);
  die();
?>

Can anyone help me, Please?

Mahmoud El-halaq · Accepted Answer · 2018-07-18 02:34:26Z

1

It works,

I added

header("Access-Control-Allow-Origin: *");

to the API file

and make the get request from the localhost/vuejs link, not like localhost:8080 and it's work

Thanks

answered Jul 18, 2018 at 2:34

Mahmoud El-halaq

115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gowtham · Accepted Answer · 2018-11-07 21:29:51Z

Include the header in the php. Note: should be the 1st line before you return anything.

<?php
header("Access-Control-Allow-Origin: *");

And try to run the php code 1st using command prompt:

php -S localhost:8888 ajaxfile.php

Note: try to use different port number as for me it is unable to get the api from same 8080 port in which my vueProject is running. This will create an api end point with your php. Which will listen to http://localhost:8888/projectname/api.php.

Now When used axios.get(http://localhost:8888/projectname/api.php) will get the response for the api.I havent tried without axios module but i guess it should work.

allRecords: function(){
  axios.get('http://localhost:8888/VueAxios/ajaxfile.php').then(response => {
    this.users = response.data
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error);
  });
}

This function worked for me. Note: axios is a very handy in this situation. Hope it helps.

Nathan · Accepted Answer · 2018-07-18 00:57:57Z

0

Try response.body to get the response data:

this.$http.get("api.php?action=read")
        .then(response => {
          console.log(response.body);
        }, error => {
          console.log(error);
        });

answered Jul 18, 2018 at 0:57

Nathan

12k11 gold badges54 silver badges94 bronze badges

2 Comments

Nathan Over a year ago

@MahmoudEl-halaq What does the output of console.log(response) look like?

Mahmoud El-halaq Over a year ago

this photo for the console photobox.co.uk/my/photo/full?photo_id=500899209507

Collectives™ on Stack Overflow

Vuejs get request from PHP/MySQL doesn't work

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related