nuxt / vercel-builder

Vercel Builder for Nuxt
MIT License
645 stars 76 forks source link

Vercel show page instead of API response #659

Closed maximilian-schwarz closed 2 years ago

maximilian-schwarz commented 2 years ago

Hello,

I am currently trying to deploy my NuxtJS app on Vercel. Everything is working fine, except for my server middleware. Currently I have created a server middleware as a test, which simply returns the entered parameters as JSON.

Current behaviour local

Locally, I start the application with 'npm run dev'. Everything is accessible under localhost:3000.

I call the following endpoint: http://localhost:3000/api/mailchimp/test

I get a correct JSON response with the content type: application/json.

Current behaviour vercel

If I now deploy the application to vercel and then call the endpoint, I have the problem that I do not receive a JSON response, but simply the _.vue page is loaded.

Folder structure: Bildschirmfoto 2022-03-19 um 10 33 18

api/mailchimp/test.js:

module.exports = async (req, res) => {
  res.status(200).json(req.body).end()
};

vercel.json

{
  "version": 2,
  "routes": [
    {
      "src": "/api/mailchimp",
      "dest": "/api/mailchimp/index.js",
      "methods": ["POST", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Methods": "POST",
        "Access-Control-Allow-Headers": "Content-Type"
      }
    },
    {
      "src": "/api/mailchimp",
      "dest": "/api/mailchimp/test.js",
      "methods": ["POST", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Methods": "POST",
        "Access-Control-Allow-Headers": "Content-Type"
      }
    }
  ],
  "builds": [
    {
      "src": "api/**/*.js",
      "use": "@vercel/node"
    },
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": [
          "apollo/**",
          "api/**"
        ]
      }
    }
  ]
}

middleware/page.js

export default function ({ app, store, route, error: nuxtError }) {
  if(!route.params.pathMatch.includes('api/')) {
    const page = store.getters["pages/bySlug"](route.params.pathMatch);
    if(!page) {
      nuxtError({
        statusCode: 404,
        message: app.i18n.t('error.page.404.message'),
      });
    }
  }
}

nuxt.config.js:

serverMiddleware: process.env.NODE_ENV === 'production' ? [] : [
    {path: "/api/mailchimp", handler: "@/api/mailchimp/index.js"},
    {path: "/api/mailchimp", handler: "@/api/mailchimp/test.js"},
  ]

I try a lot of different things but nothing is working. On localhost everything is working fine. Only at vercel the Endpoints not working :(. Does anyone have any idea what I'm doing wrong? Thanks for you help.

maximilian-schwarz commented 2 years ago

I found the issue. Now the solution for all others. It was a miss configuration in the server middleware.

import express from 'express'
import bodyParser from 'body-parser'

const app = express()
app.use(bodyParser.json())

app.post('/api/hello', function(req, res) {
  const { info } = req.body
  console.log(info)
  res
    .status(200)
    .json({ info })
    .end()
})

export default app

IT'S VERY IMPORTANT TO USE THE FULL PATH. IF NOT THE SERVERMIDDLWARE IS NOT WORKING!!!

I used in my server middleware only:
app.post('/hello');

instead of:

app.post('/api/hello')