Nuxt运行时访问Express后端API出现Cannot GET报错问题

• 长期使用vue-cli开发项目，近期学习使用Nuxt框架，运行Nuxt项目时发现基于Express搭建的后端API服务无法正常工作，访问服务对应的5000端口时出现异常，不确定是否是nuxt.config.js缺少后端index.js路由映射配置导致。

nuxt.config.js #

export default {
  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" }],
  },

  css: [],

  plugins: ["~/plugins/apiLogic.js"],

  components: true,

  buildModules: ["@nuxtjs/vuetify"],

  modules: [
    "@nuxtjs/axios",
  ],

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

  auth: {
    redirect: {
      login: "/login",
    },
    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,
      },
    },
  },
};

后端服务 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);
  }
});

• 首先纠正认知：Nuxt和Express是两个独立运行的服务，不需要在nuxt.config.js中配置后端index.js的路由映射。第一步先单独启动Express服务，本地直接访问http://localhost:5000/user验证后端状态：未登录场景下正常返回401状态码说明后端服务本身启动正常，如果直接连接失败优先排查5000端口是否被占用、后端启动脚本是否正常执行。
• 补全Nuxt模块注册：当前配置中只写了auth模块的参数，但是没有把auth模块加入modules数组，导致鉴权相关的请求逻辑完全没有加载，会出现请求不带凭证、接口跳转异常的问题。安装对应Nuxt2版本的auth依赖后，把模块加入配置：

modules: [
  "@nuxtjs/axios",
  "@nuxtjs/auth-next"
],

• 修复Express服务缺漏的中间件：当前后端代码只引入了session、passport相关依赖，但是没有注册对应中间件，会导致req.isAuthenticated()、req.logout()等方法不存在，请求直接报500错误。需要在路由定义前补上以下逻辑：

// session配置，参数根据自己的业务调整
app.use(session({
  secret: "替换成你自己的session加密密钥",
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: "替换成你自己的MongoDB连接地址" })
}))
// 初始化passport
app.use(passport.initialize())
app.use(passport.session())
// 补全passport序列化、反序列化逻辑，以及LocalStrategy、GoogleStrategy的配置，否则鉴权流程无法正常执行

• 调整跨域配置：当前CORS白名单只加了3000和5000端口的localhost地址，Nuxt服务端渲染时发起请求的源不属于这两个地址，会被CORS规则拦截，开发环境可以临时放开本地源限制，或者把127.0.0.1对应端口、Nuxt服务端地址加入白名单。
• 可选代理配置简化开发：如果不想处理跨域问题，可以安装代理模块，在nuxt.config.js中配置接口代理，不用硬写后端5000端口的绝对地址：

// 安装@nuxtjs/proxy依赖后加入modules
modules: [
  "@nuxtjs/axios",
  "@nuxtjs/auth-next",
  "@nuxtjs/proxy"
],
axios: {
  credentials: true,
  proxy: true
},
proxy: {
  "/api/": {
    target: "http://localhost:5000/",
    pathRewrite: {"^/api/": ""}
  }
}

配置后所有接口请求都用/api/xxx的路径即可，开发环境不会触发浏览器跨域限制。

内容的提问来源于stack exchange，提问作者TheRevenant95