5

I recently started learning vue.js and currently using vue.js with vue-simple-webpack template , express and mongo to develop a simple application . I am using localhost to develop and test the application.

application front-end runs in port 8080 and the server is running in a different port (3000)

Here is my server.js where i have a simple api to get data from my localdb

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) => {
  if (err) 
    return console.log(err);
  db = database;
  app.listen(3000, () => {
    console.log('listening on 3000');
  })
})

app.get('/products', (req, res) => {
    db.collection('products').find().toArray(function(err, results) {
    console.log(results)
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(results));
    })
})

tested the server.js , it works . see below screenshot.

enter image description here

Vue application is running in http://localhost:8080/ using the webpack template's default configuration. i am trying to call the /products api end from the vue.js file using $http get as follows...

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');
            });
        }
    }
}

But i get the following error in the browser console.

enter image description here

As you can see , even though i am using the port 3000 in server.js , when i try access the /products api end , it actually goes through port 8080. Therefore it throws a 404 http error .

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 ?

Can i use API Proxying 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.

1
  • $http() should allow you to specify the port. Commented Oct 17, 2017 at 14:34

1 Answer 1

7

You can use proxy configuration provided by webpack.

Docs: https://webpack.js.org/configuration/dev-server/#devserver-proxy

snippet config:

proxy: {
  "/products": "http://localhost:3000/products"
}

A better practice would be forwarding /api/* requests to http://host:port/api/* urls.

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

5 Comments

I added the proxy in the webpack web config . Also changed server urls to /api/* pattern like you suggested . But the issue is still there when i try to access the /api/products . the $http.get method tries to access the /api/products from within the localhost:8080 port . therefore i am getting the 404 error
Please refer this issue i have raised in my code github code repo. github.com/mal90/adApp/issues/3
You can add following config. I just checked out the code and tested. It worked fine. :) proxy: { "/api/": { target: "localhost:3000", secure: false } }
Correct . that works . In my early solution with proxy , i made a mistake . Thank you @Saurabh
This is brilliant, and by far the most simple solution to this whole CORS problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.