Express API server not responding in Nuxt application

Other Questions API
1

Hello everyone! I’m transitioning from Vue CLI to Nuxt and I’m facing some challenges. My Express backend appears to be malfunctioning when I try to connect on port 3001. Coming from a standard Vue project, I’m unsure if I have to adjust any settings differently within Nuxt.

Here’s my nuxt.config.js setup:

export default {
  head: {
    titleTemplate: "%s - my-nuxt-app",
    title: "my-nuxt-app",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  css: [],
  plugins: ["~/plugins/apiClient.js"],
  components: true,
  buildModules: ["@nuxtjs/vuetify"],
  modules: ["@nuxtjs/axios"],

  axios: {
    baseURL: "http://localhost:3001/",
    credentials: true,
    init(axios) {
      axios.defaults.withCredentials = true;
    },
  },

  auth: {
    redirect: {
      login: "/signin",
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: "/signin",
            method: "post",
            propertyName: "accessToken",
          },
          logout: { url: "/signout", method: "post" },
          user: { url: "/profile", method: "get", propertyName: "userData" },
        },
        tokenRequired: false,
        tokenType: false,
      },
    },
  },
};

And here’s my server.js file:

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const session = require("express-session");
const passport = require("passport");
const passportLocalMongoose = require("passport-local-mongoose");
const LocalStrategy = require("passport-local").Strategy;
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const server = express();
const serverPort = 3001;

server.use(bodyParser.urlencoded({ extended: true }));
server.use(bodyParser.json());

server.use(
  cors({
    credentials: true,
    origin: ["http://localhost:3001", "http://localhost:3000"],
  })
);

server.post("/signout", (req, res) => {
  req.logout();
  res.status(200).send();
});

server.get("/profile", async (req, res) => {
  try {
    if (req.isAuthenticated()) {
      res.json({ userData: req.user });
    } else {
      console.log("Authentication failed");
      res.sendStatus(401);
    }
  } catch (error) {
    console.log(error);
    res.sendStatus(500);
  }
});

Is there a need for me to include my server.js file in the Nuxt configuration? Any assistance would be greatly appreciated!

2

Had the same issue switching from Vue CLI to Nuxt last year. Your Nuxt config looks fine - the problem’s probably with your Express server not running or a port conflict. Make sure you’re starting Express separately from Nuxt. Nuxt uses port 3000 by default, so Express on 3001 should work. Check if your server.js has server.listen(serverPort) at the bottom - I don’t see it in your snippet. Try hitting your Express endpoints directly (like http://localhost:3001/profile) to see if the server’s responding. Also check if firewall or antivirus is blocking the connection. Your axios config in nuxt.config.js looks right for connecting to a separate Express backend.

3

I ran into a similar challenge during my transition from Vue CLI to Nuxt. Your Nuxt configuration seems correct, but the issue likely stems from your Express server not actively listening on port 3001. You need to include the line server.listen(serverPort) at the end of your server.js file to ensure it accepts incoming connections. Remember to run your Express server independently while Nuxt runs on port 3000. Additionally, your CORS settings appear properly configured for the development environment.

4

you’re missing server.listen(3001) at the end of your server.js file - that’s why your express server isn’t starting. also make sure you’re running the express server in a separate terminal while nuxt runs on port 3000.