Server Proxy enabled but requests still show actual api endpoint

[derrickobedgiu1]

Hey @manchenkoff

I’m trying to test the Nuxt SSR + nuxt-auth-sanctum serverProxy to proxy API requests through the frontend domain so Sanctum cookies and CSRF work as same-origin.

According to the docs, enabling serverProxy should cause the browser to call the frontend domain, while Nuxt internally forwards the request to the Laravel backend.

However, this does not appear to be working as expected. Am I missing something.

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    '@nuxt/ui',
    '@vueuse/nuxt',
    '@nuxthub/core',
    'nuxt-auth-sanctum'
  ],
  ssr: true,

  devtools: {
    enabled: true
  },

  css: ['~/assets/css/main.css'],

  routeRules: {
    '/api/**': {
      cors: true
    }
  },

  compatibilityDate: '2024-07-11',

  nitro: {
    preset: 'cloudflare-pages'
  },

  eslint: {
    config: {
      stylistic: {
        commaDangle: 'never',
        braceStyle: '1tbs'
      }
    }
  },

  sanctum: {
    baseUrl: '/api/sanctum',
    serverProxy: {
      enabled: true,
      route: '/api/sanctum',
      baseUrl: 'http://api.example.com'
    },
    redirect: {
      keepRequestedRoute: true,
      onAuthOnly: '/login',
      onGuestOnly: '/'
    },
    globalMiddleware: {
      enabled: true,
      prepend: true,
      allow404WithoutAuth: false
    }
  }
})

Was I wrong to expect useSanctumFetch('/api/user/profile') from app.example.com to show http://app.example.com/api/sanctum/user/profile in browser network inspect rather than the original http://api.example.com/api/user/profile?

• Cloudflare Pages
• Nuxt 4
• nuxt-auth-sanctum 2.0.0

[derrickobedgiu1]

Also, how'd we pass the sanctum > serverProxy > baseUrl from .env ? I understand the one for sanctum > baseUrl is NUXT_PUBLIC_SANCTUM_BASE_URL=*

[manchenkoff]

According to the docs, enabling serverProxy should cause the browser to call the frontend domain, while Nuxt internally forwards the request to the Laravel backend.

Hey @derrickobedgiu1 , this is correct. Here is the example of complete configuration to handle all requests internally:

export default defineNuxtConfig({
  modules: [
    // ...
    'nuxt-auth-sanctum',
  ],

  ssr: true,

  sanctum: {
    baseUrl: '/laravel',
    serverProxy: {
      enabled: true,
      baseUrl: 'http://localhost:80',
      route: '/laravel',
    },
  },
})

All requests will be sent to http://localhost:3000/laravel/* which will be redirected to http://localhost:80/*.

However, this does not appear to be working as expected. Am I missing something.

Make sure you do not have any config cached and you do not override NUXT_PUBLIC_SANCTUM_BASE_URL with something different from sanctum.baseUrl (/laravel in this case).

routeRules: {
'/api/**': {
cors: true
}
},

I am almost sure that you do not need to set this manually since everything will be handled by Nuxt server.

Cloudflare Pages

I have not tested this infrastructure and as far as I know, it's in experimental mode for now. Please, make sure that it works locally first, then we'll be able to tell if it is related to the environment or there is a bug with a library. Most of the projects I use it for rely on Docker/VPS/pm2 node environment.

Also, how'd we pass the sanctum > serverProxy > baseUrl from .env ? I understand the one for sanctum > baseUrl is NUXT_PUBLIC_SANCTUM_BASE_URL=*

It's the same approach, Nuxt automatically converts all settings into format like NUXT_[PUBLIC?]_[MODULE]_[PARAM], so I believe for serverProxy URL it would be NUXT_SANCTUM_SERVER_PROXY_BASE_URL since it is a part of runtimeConfig but not the public one.

[derrickobedgiu1]

I checked again and somehow the issue was that when the NUXT_PUBLIC_SANCTUM_BASE_URL then the proxy won't work. That's what I observed happening. Nuxt prioritizes the .env over the config file.

[manchenkoff]

Nuxt prioritizes the .env over the config file

Yes, this is how it is supposed to work