[Vuejs]-Cannot GET /register shows when trying to make Post request for Vue Express app

by

0👍

✅

First of all, you need to take into account that the frontend part of your app is running separately from your backend (even if they are in the same machine), so the router for the frontend is not related to the backend, that is why you are able to hit the server using postman, but nothing gets render.

Here is what I’m seeing:

  • You have the backend running and listening for 2 locations: GET "/", and POST "/register".
  • If you run the server and then go to the root (/) in the browser, you
    will see the message in the console but nothing rendered, nothing is
    rendered because the server is just responding with a message.
  • When you test the POST with postman, the server is responding with a message (nothing is rendered either), because the server is not "serving" any content.

If you want the users to see something while navigating to any route, the server needs to return something that the browser can show (your frontend). With Vue, you have a single page application which means that you don’t need a server checking what to serve with each location, you have the internal Vue router for that, but you need the server to return your index at some point.

For this you will need to serve your index.html as a static file, so you will need to add:

app.use(express.static("PathToTheFolderContainingYourVueApplication"))

Docs for this

And then in any route you should start serving your index.html in your case (and with many vue apps) you want to serve the index for any route that the server doesn’t know, because the Vue router could decide to show something and of course your Vue app should handled the scenario where a route that no one knows is being hit (the famous 404).

Your code will look something like this:

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
// Here you need the path to your vue index
// __dirname is pointing to the current path where this node process is running
// check the docs for __dirname https://nodejs.org/docs/latest/api/modules.html#__dirname
const path = __dirname + '/PathToTheFolderContainingYourVueIndex'; 
const app = express();
app.use(express.static(path)); // express now knows that it will serve files from here

//app assigned to express server and functionality below
const app = express()
app.use(morgan('combine'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(cors())

// I'm commenting this, because you want Vue to show somwthing in this route
// app.get('/', function(req, res) {
//   res.send({
//     message: 'Welcome'
//   })
// })

// leaving this because you want the server handling this route
app.post('/register', function (req, res) {
  res.send({
    message: 'Hello, you have been registered. Enjoy!'
    })
}) 

// The routes are solved in order, if none of the previous ones was hit, then this one will be checked
// The * is telling express that any route will be accepted (that is why this is the last one)
app.get('*', function(req, res) {
  // The server doesn't know what to show, but you will return the Vue index and then let the vue-router do its thing
  res.sendFile(path + "index.html");
});

app.listen(process.env.PORT || 8081)

Now you can try in the browser to go to any route handled by your Vue app (I didn’t test the code myself but I assume you can do it and spot any issue).

Leave a comment