0

When running nuxt generate the app will return a 405 error, I believe for each of the /api routes that exist. generate error pic. Its deployed with gh-pages -d dist to GitHub Pages w/ custom domain. 404 and 405 errors are returned when trying to access a page which makes axios calls to /api routes. production error pic. The app runs fine on localhost:3000 and can make all GET and POST calls to /api routes successfully.Tried tinkering with the nuxt.config.js but with no luck. It's possibly narrowed down to the nuxt.config.js settings and probably something to do with the production URL. Let me know what else I can provide to help you help me. Thanks.

App stack: Nuxt, nodejs, express, axios, knex, jwt, nuxt/auth

nuxt.config.js

export default {

  target: 'static',

  head: {
    title: '',
    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: '/icon.ico'
      },
    ]
  },

  css: [],

  loading: {
    color: '#4caf50',
    height: '6px'
  },

  plugins: [{
    src: '~/plugins/imagezoom.client.js'
  }],


  components: true,

  buildModules: [
  ],

  server: {
    port: process.env.PORT || 3000,
    host: '0.0.0.0'
  },

  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    'nuxt-lazy-load'
  ],


  serverMiddleware: [
    '~/api/index.js'
  ],

  auth: {
    strategies: {
      local: {
        scheme: 'local',
        endpoints: {
          login: {
            url: "api/auth/login",
            method: "post",
            propertyName: "token"
          },
          user: {
            url: "/api/auth/user",
            method: "get",
            propertyName: "user"
          },
          logout: true
        },
        // tokenType: ''
      }
    }
  },

  generate: {
    fallback: "404.html"
  },



  axios: {
    baseURL: (process.env.NODE_ENV !== 'production' ? 'http://localhost:3000/' : 'https://<my-site-redacted>.com/'),
    credentials: false
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    },
    googleAnalytics: {
      id: process.env.GOOGLE_ANALYTICS_ID
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

  ssr: true,
  router: {
    middleware: ['auth'],
    base: '/'
  },

  build: {
    standalone: true,
    publicPath: 'https://<my-site-redacted>.com/'
  },
  vue: {
    config: {
      productionTip: false,
      devtools: (process.env.NODE_ENV === "production" ? false : true)
    }
  }
}

Tried altering setup in nuxt.config.js (axios, path, URL, router, build)

  • So, you're using Nuxt2 with SSG right? First of, don't host on GH pages, it's a bad experience. Try Netlify or Vercel rather. If you want some server middleware (`/api`), you'll need an SSR setup, something [like this](https://stackoverflow.com/a/72102209/8816585). Which is not hostable on GH pages/Netlify/Vercel but on PaaS like Heroku/Render.com etc... Also, it works locally because you do have a local running node server. – kissu Dec 14 '22 at 11:22

0 Answers0