title: Calling node express server API from Vue application running in a different port
body: <p>I recently started learning vue.js and currently using vue.js with <a href="https://github.com/vuejs-templates/webpack-simple" rel="noreferrer">vue-simple-webpack</a> template , express and mongo to develop a simple application . I am using localhost to develop and test the application.</p>
  
  <p>application front-end runs in port <strong>8080</strong> and the server is running in a different port <strong>(3000)</strong></p>
  
  <p>Here is my <code>server.js</code> where i have a simple api to get data from my <code>localdb</code></p>
  
  <pre><code>const express = require('express');
  const MongoClient = require('mongodb').MongoClient;
  const mongodb = require('mongodb');
  const bodyParser= require('body-parser');
  const app = express();
  var db;
  
  var URL='mongodb://localhost:27017/'+'mydb';
  console.log(URL);
  
  app.use(express.static(__dirname + '/public'));
  app.use(bodyParser.urlencoded({extended: true}))
  app.use(bodyParser.json())
  
  MongoClient.connect(URL, (err, database) =&gt; {
    if (err) 
      return console.log(err);
    db = database;
    app.listen(3000, () =&gt; {
      console.log('listening on 3000');
    })
  })
  
  app.get('/products', (req, res) =&gt; {
      db.collection('products').find().toArray(function(err, results) {
      console.log(results)
      res.setHeader('Content-Type', 'application/json');
      res.send(JSON.stringify(results));
      })
  })
  </code></pre>
  
  <p>tested the server.js , it works . see below screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/JsmSb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JsmSb.png" alt="enter image description here"></a></p>
  
  <p>Vue application is running in <code>http://localhost:8080/</code> using the webpack template's default configuration. i am trying to call the <code>/products</code> api end from the vue.js file using $http get as follows...</p>
  
  <pre><code>export default {
    name: 'Products',
    methods: {
          get: function() {
              // GET request
              this.$http({
                  url: '/products',
                  method: 'GET'
              }).then(function(response) {
                  console.log('ok');
              }, function(response) {
                  console.log('failed');
              });
          }
      }
  }
  </code></pre>
  
  <p>But i get the following error in the browser console.</p>
  
  <p><a href="https://i.stack.imgur.com/6FBby.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6FBby.png" alt="enter image description here"></a></p>
  
  <p>As you can see , even though i am using the port <code>3000</code> in <code>server.js</code> , when i try access the <code>/products</code> api end , it actually goes through port <code>8080</code>. Therefore it throws a <strong>404</strong> http error . </p>
  
  <p>My question is how i can access the API end from within the front-end which runs in a different port. Is that even possible ? </p>
  
  <p>Can i use <a href="http://vuejs-templates.github.io/webpack/proxy.html" rel="noreferrer">API Proxying</a> here . If so , can somebody point me in the correct direction on how to do it since there are not much info available on the web.</p>