Nuxt•10mo ago

Proxy API doesn't work in vercel

I following this video https://www.youtube.com/watch?v=J4E5uYz5AY8 from @manniL / TheAlexLichter and I have this [...].ts file inside server/api folder

// Proxy all requests to the API to the configured API base URL.
// See https://www.youtube.com/watch?v=J4E5uYz5AY8

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const proxyUrl = useRuntimeConfig().apiBaseUrl
  const path = event.path.replace(/^\/api\//, '')
  const target = joinURL(proxyUrl, path)
  return proxyRequest(event, target)
})

// Proxy all requests to the API to the configured API base URL.
// See https://www.youtube.com/watch?v=J4E5uYz5AY8

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const proxyUrl = useRuntimeConfig().apiBaseUrl
  const path = event.path.replace(/^\/api\//, '')
  const target = joinURL(proxyUrl, path)
  return proxyRequest(event, target)
})

The proxy is working on local env and I just figured out when I deploy the apps using Vercel, I got the 404 when I hit the endpoint. I also already set the env variable in Vercel same as my local env

Alexander Lichter

YouTube

The BEST way to proxy your API in Nuxt

➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to us...

8 Replies

manniL•10mo ago

What env variable do you set and how does your nuxt config looks like?

FontiOP•10mo ago

Here is my runtimeConfig in nuxt.config.ts

runtimeConfig: {
    apiBaseUrl: process.env.NUXT_API_BASE_URL,
    public: {
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL,
      recaptchaSiteKey: process.env.NUXT_PUBLIC_RECAPTCHA_SITE_KEY,
      sentry: {
        dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
        environment: 'development',
      },
    },
  },

runtimeConfig: {
    apiBaseUrl: process.env.NUXT_API_BASE_URL,
    public: {
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL,
      recaptchaSiteKey: process.env.NUXT_PUBLIC_RECAPTCHA_SITE_KEY,
      sentry: {
        dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
        environment: 'development',
      },
    },
  },

my env

NUXT_API_BASE_URL=https://some-api-url.com

NUXT_API_BASE_URL=https://some-api-url.com

manniL•10mo ago

And how do you deploy to Vercel?

manniL•10mo ago

these settings? (default)

manniL•10mo ago

I just deployed https://github.com/manniL/alexander-lichter-proxy-nuxt to https://alexander-lichter-proxy-nuxt.vercel.app/ Works as expected I'd say

GitHub

GitHub - manniL/alexander-lichter-proxy-nuxt

Contribute to manniL/alexander-lichter-proxy-nuxt development by creating an account on GitHub.

FontiOP•9mo ago

Hi, I opened this issue again, the previous issue on Vercel was running successfully, the problem was because I set the wrong env variable there 😄 The another issue is when my devops try to deploy to the dev server env using AWS Apprunner and use this "yarn dev" command start. The proxy is not working, I tried to use Proxy routeRule and Nitro proxy API endpoint but I always got this 500 error My [...].ts

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const proxyUrl = useRuntimeConfig().apiBase
  const path = event.path.replace(/^\/api\//, '')
  const target = joinURL(proxyUrl, path)
  return proxyRequest(event, target)
})

import { joinURL } from 'ufo'

export default defineEventHandler(async (event) => {
  const proxyUrl = useRuntimeConfig().apiBase
  const path = event.path.replace(/^\/api\//, '')
  const target = joinURL(proxyUrl, path)
  return proxyRequest(event, target)
})

My runtime config

runtimeConfig: {
    apiBase: 'https://api.someurl.org/api',
}

runtimeConfig: {
    apiBase: 'https://api.someurl.org/api',
}

Note: - It works in my local and vercel. - Already ask my devops but no luck 😦 - My API has a healtcheck url https://api.someurl.org/api/healthcheck - So if the proxy URL is working, I should be able to access it by https://myfrontend.org/api/healthcheck

manniL•9mo ago

which node version?

FontiOP•9mo ago

Node 18

Gaming

Programming

Proxy API doesn't work in vercel