Strange proxy behaivior

[sneakylenny]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.14.2
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: yarn@1.22.11
• Builder: webpack
• User Config: head, css, plugins, components, buildModules, modules, axios, proxy, build, bridge
• Runtime Modules: primevue/nuxt, @nuxtjs/axios@5.13.6, @nuxtjs/proxy@2.1.0
• Build Modules: @nuxt/bridge@3.0.0-27498038.f18e68b

---

Reproduction

• Create a new project following the guide on nuxtjs.org
  • Run yarn create nuxt-app proxy-test
  • complete the setup
    • Project name: proxy-test
    • Programming language: JavasScript
    • UI framework: Primevue
    • Nuxt.js modules: Axios - Promise based HTTP client
    • Linting tools: None
    • Testing framework: None
    • Rendering mode: Universal (SSR / SSG)
    • Deployment target: Server (Node.js hosting)
    • Development tools: None
    • What is your GitHub username? TimVanHerwijnen
    • Version control system: Git
  • Run cd proxy-test
• Update to bridge by following the guide on v3.nuxtjs.org
  • In package.json replace "nuxt": "^2.15.0" with "nuxt-edge": "latest"
  • Run yarn install
  • Run yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge
  • Update scripts property in package.json as described in the guide
  • Update nuxt.config.js as described in the guide
• (optional) Run the project in dev by running yarn dev to check it is working.
• Install nuxt proxy module
  • Run yarn add @nuxtjs/proxy
  • Add the module to nuxt.config.js in the modules prop:

  export default defineNuxtConfig({
    // ...
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
      // Doc: https://www.primefaces.org/primevue/showcase-v2/#/setup
      'primevue/nuxt',
      // https://go.nuxtjs.dev/axios
      '@nuxtjs/axios',
      '@nuxtjs/proxy', // Add the proxy module
    ],
    // ...
  })

  • Add proxies to nuxt.config.js in a newly created proxy prop:

  proxy: {
    '/proxy/': { target: process.env.PROXY_URL || 'http://localhost:8000', pathRewrite: { '^/proxy/': '' } },
  },

• Add a way to test proxy
  • I modified the Tutorial.vue for speed:

  <template>
    <div>
      <button @click="testProxy">Test proxy</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'NuxtTutorial',
    methods: {
      testProxy() {
        this.$axios('/proxy/test')
      }
    },
  }
  </script>

• Run the project by running yarn dev and test the proxy:
  

Describe the bug

I encountered this issue after I deleted the node_modules/ folder and yarn.lock file and ran yarn install in an existing project that makes use of Nuxt, Nuxt Bridge and the Proxy. Before I did that it was working fine.
So I searched everywhere online if more people have encountered this issue and couldn't find anything similar.

The strange behaviors:

Somehow in our project when hitting the auth proxy it gives random results after using it:

Sometimes gives an 400 (returned from the actual api) and sometimes gives an 404 (returned from nuxt itself?)
Which is the strange behavior.
It worked fine before but after re-installing the node modules it also became incredibly slow for some reason.

• Before avg 20ms
• After avg 2s

When hitting the /proxy/ endpoint in the test project described in reproduction the Laravel project somehow does receive the request:

(Don't worry I did save web.php, I just removed other endpoints for censor purposes)

Additional context

I'm very confused about what could cause this.

Logs

No response

[sneakylenny]

Some more stange behaivor

When I add a file to the server middleware:

/server/middleware/<name-doesnt-matter>.js

export default (req, res, next) => {
  setTimeout(() => {
    next()
  }, 2000);
}

Navigating to the proxy location somehow works?
I think it's because the server-side request isn't able to respond before the client-side request?
This only forks for visiting the proxy location manually, making requests using axios still won't work.

It did work, so trying older versions

Since it happened after updating the packages I went about and installed older versions of nuxt-edge and @nuxt/bridge
Here's what I found out:

• First of all I removed /server/middleware/<name-doesnt-matter>.js
• nuxt-edge didn't have any effect on the app behavior so I stopped checking for older versions of this package and left it on latest
• for @nuxt/bridge however I did manage to find version where the proxy worked as expected.
  • Version 3.0.0-27488730.0cbc9cb and older seemed to work. The proxy is working as expected: fast and correct.
  • All version between 3.0.0-27488831.368610e and 3.0.0-27489452.8874728 gave me [unhandledRejection] Cannot find module '@nuxt/ui-templates' when building. It would continue until finished but wouldn't respond when completed.
  • Version 3.0.0-27489614.315e5b5 and newer were stable but show the strange behavior described in the issue.

Conclusion

So I will continue the project on version "@nuxt/bridge": "npm:@nuxt/bridge-edge@3.0.0-27488730.0cbc9cb" as a workaround until this issue is resolved or when nuxt3 is stable and nuxt/auth is available

[danielroe]

I'm closing this for now - this is an upstream issue as @nuxtjs/proxy isn't yet compatible with nitro. Let's track built-in proxy support in nitropack via nitrojs/nitro#113.