RC12: vite.server.proxy ignored in nuxt.config.ts

[bcspragu]

Environment

• Operating System: Linux
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.11 (note: I downgraded after rc12 broke things)
• Nitro Version: 0.5.4
• Package Manager: npm@8.1.2
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

I can try to make a fresh reproduction if needed, but the issue is pretty straightforward: updating to RC12 makes Vite dev server proxying stop working. For example, we have a config like the following:

  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
        },
      },
    },
  },

We route any traffic at http://localhost:3000/api/... to our backend, running on 8080. This has worked well in all Nuxt 3 versions up til now, and as far as I can tell, is still a valid and supported Vite option.

Describe the bug

As of RC12, our proxy config is no longer respected. Building on the example above, a request to http://localhost:3000/api/graphql used to return a response from our backend server on http://localhost:8080, but now hits our Nuxt catchall route and gives us a 404 page.

SSR requests succeed as usual (because they don't use the proxy for backend requests), but any subsequent requests from the clients fail, because they're getting an HTML response when they were expecting JSON.

Additional context

No response

Logs

No response

[KurumiRin]

I also had this problem, because I configured server: false in useFetch and used vite proxy, so all my requests returned a 404 page.

[slarrasoain]

I also had this problem. Just try with fresh install and the issue is still here.

[danielroe]

Please do not use vite proxy. The vite dev server is not the same thing as the nitro dev server and they are not compatible. See #14917.

edit: the change in behaviour is likely a result of new h3 format. (However, I think it's much more likely we want to make sure we support proxy natively in nitro than support vite proxy.)

cc: @pi0

[P4sca1]

We are using a proxy configured with nginx in production and I used the vite dev server proxy in development to get the same result. So there are legitimate reasons to use the vite proxy.

[bcspragu]

Similar deal on our end: In production we use rewrites in Firebase Hosting to send traffic to the backend, so the proxying is only needed locally. We could use something like NGINX to do the proxying, but that's another service to run when developing.

[silencerspirit]

@danielroe Can you advise some additional solution of proxying locally?

[bcspragu]

@danielroe Can you advise some additional solution of proxying locally?

Not danielroe, but it turns out that our deployed app was broken (broken SCSS styling, didn't root cause it) on RC11, so I bit the bullet and updated to RC12 (which fixed the issue).

My solution was an NGINX proxy in a Docker container, that I start up alongside my backend service (though it could be done independently or with the frontend).

Here's how I did it, using the same config from above as an example:

  vite: {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
        },
      },
    },
  },

The NGINX config looks like:

# nginx.conf, mostly copied from the nginx:1.23 container image's default nginx.conf file, see https://hub.docker.com/_/nginx/
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    server {
        listen       3000 default_server;
        listen       [::]:3000 default_server;

        location / {
            proxy_pass http://127.0.0.1:3002;
        }

        location /api/ {
            proxy_pass http://127.0.0.1:8080;
        }
    }
}

This config says "Run NGINX on port 3000, route traffic to anything at /api/... to port 8080 and everything else to port 3002". We use 3002 instead of 3001 because we've already co-opted 3001 for some WebSocket shenanigans.

And then we run NGINX in Docker with:

docker run \
  --net=host \
  --volume path/to/nginx.conf:/etc/nginx/nginx.conf:ro \
  nginx:1.23

The --net=host is important if you want it to proxy things that aren't also in Docker containers on the same Docker network. You might also want the usual Docker flags (--rm to delete after use, --name to reference it easily, --detach to run in the background, etc).

We then run (using "scripts" in package.json) our Nuxt dev server with:

HOST=0.0.0.0 PORT=3002 nuxi dev

and run it in preview mode with:

nuxi build
HOST=0.0.0.0 PORT=3002 nuxi preview

I also had to turn off writeEarlyHints, introduced in RC12, because NGINX was deeply unhappy with it, regardless of proxy buffering/not buffering/size/etc:

// in nuxt.config.ts
  experimental: {
    // This was breaking our local preview mode (e.g. `npm run preview`), see https://github.com/nuxt/framework/issues/8450
    writeEarlyHints: false,
  },

As far as I can tell, this works flawlessly, including HMR in dev mode.

[silencerspirit]

@bcspragu thx so much for detailed answer.

[Binaryify]

same

[manniL]

With RC13, you can use Nitro's devProxy.

[danielroe]

Closing as we now have devProxy support, which is what you should use rather than the vite.server.proxy option. If you have any issues with it, please feel free to open a new issue with a reproduction and we can resolve there.