Nuxt - Cannot GET api backend

Question

I usually use vue-cli project so i just try learn to use nuxt and when i try to run my nuxt project i have the impression my backend api (express) doesen't working, when i try to go on port 5000:

my nuxt.config.js :

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: "%s - nuxt-project-desk",
    title: "nuxt-project-desk",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ["~/plugins/apiLogic.js"],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: ["@nuxtjs/vuetify"],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: "http://localhost:5000/",
    credentials: true,
    init(axios) {
      axios.defaults.withCredentials = true;
    },
  },

  auth: {
    redirect: {
      login: "/login", // User will be redirected to this path if login is required.
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: "/login",
            method: "post",
            propertyName: "token",
          },
          logout: { url: "/logout", method: "post" },
          user: { url: "/user", method: "get", propertyName: "user" },
        },
        tokenRequired: false,
        tokenType: false,
      },
    },
  },
};

I don't know is if it's because i need to map my index.js in the nuxt.config.js, maybe?? ‍♂️

index.js :

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 app = express();
const MongoStore = require("connect-mongo");
const port = 5000;

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

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

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

app.get("/user", async (req, res) => {
  try {
    if (req.isAuthenticated()) {
      res.json({ user: req.user });
    } else {
      console.log("User not authenticated");
      res.sendStatus(401);
    }
  } catch (err) {
    console.log(err);
    res.sendStatus(500);
  }
});

Did you tried that one? https://stackoverflow.com/a/72102209/8816585 — kissu, Jun 24 '22 at 07:04
@regex i suppose on Nuxt when you try `npm run dev` it running front/back same time, right ? — TheRevenant95, Jun 24 '22 at 14:29
@kissu Oh ok it maybe the `serverMiddleware`i forget, Thanks ! — TheRevenant95, Jun 24 '22 at 14:31
Yes, it's running the server and client side parts at the same time. So, does it work now? — kissu, Jun 24 '22 at 16:11

score 0 · Answer 1 · answered Jun 26 '22 at 03:26

It looks like OP's question was solved with this answer: https://stackoverflow.com/a/72102209/8816585

It was important to use serverMiddleware and it like that in the nuxt.config.js file

export default {
  serverMiddleware: [
    { path: '/api', handler: '~/server-middleware/rest.js' },
  ],
}

Nuxt - Cannot GET api backend

1 Answers1