title: vue.js api connection to MySQL, using axios and proxyTables
body: <p>Trying to connect to a local MySQL database using an api in vue.js</p>
  
  <p>This project is run in a directory in my home directory, and not in <code>~/Sites</code> or <code>/Library/WebServer/Documentation/</code> which are the usual public directories on a MAC.</p>
  
  <p>The <strong>api.php</strong> file connection to the db,</p>
  
  <pre><code>&lt;?php
  
  $conn = new mysqli("localhost:3306", "root", "", "vuephpcrud");
  
  if($conn-&gt;connect_error){
      die("Could not connect to database!");
  }
  
  $res = array('error' =&gt; false);
  $action = 'read';
  if(isset($_GET['action'])){
      $action = $_GET['action'];
  }
  
  
  if($action == 'read'){
      $result = $conn-&gt;query("SELECT * FROM `users`");
      $users = array();
  
      while($row = $result-&gt;fetch_assoc()){
          array_push($users, $row);
      }
  
      $res['users'] = $users;
  }
  </code></pre>
  
  <p><strong>api.php</strong> retrieves data from the db if I use the default php server,</p>
  
  <pre><code>$ php -S localhost:8080
  </code></pre>
  
  <p>and navigate to,</p>
  
  <pre><code>localhost:8080/api.php?action=read
  </code></pre>
  
  <p>The api.php file is in the root of the vue project.</p>
  
  <p>But if I running the dev server I can not get anything from the db,</p>
  
  <pre><code>$ npm run dev
  </code></pre>
  
  <p>navigating to,</p>
  
  <pre><code>localhost:8080/api.php?action=read
  </code></pre>
  
  <p>gives me,</p>
  
  <p><a href="https://i.stack.imgur.com/zSCx1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSCx1.png" alt="enter image description here"></a></p>
  
  <p>I am using axios,</p>
  
  <p><strong>HelloWorld.vue</strong></p>
  
  <pre><code>  mounted: function(){
      console.log("mounted");
      this.getAllUsers();
    },
    methods: {
      getAllUsers: function(){
        axios.get("http://localhost/api.php?action=read")
        .then(function(response){
          console.log(response);
          if(response.data.error){
            app.errorMessage = response.data.message;
          } else {
            app.users = response.data.users;
          }
        });
      }
    }
  </code></pre>
  
  <p>But actually that is not relevant here as I am navigating directly in the browser.</p>
  
  <p>I think I need to use <a href="https://vuejs-templates.github.io/webpack/proxy.html" rel="nofollow noreferrer">ProxyTables</a>,</p>
  
  <p>config/index.js</p>
  
  <pre><code>proxyTable: {
        // proxy all requests starting with / api to api.php
        '/api': {
          target: 'http://localhost:8080/api.php?action=read',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      },
  </code></pre>
  
  <p>then navigating to </p>
  
  <p>localhost:8080/api/</p>
  
  <p>this gives me,</p>
  
  <pre><code>Error occured while trying to proxy to: localhost:8080.php?action=read/.php?action=read/.php?action=read/.php?action=read/.php?action=read/.php?action=read/
  </code></pre>
  
  <p>But no errors in the console.</p>