vite/http-proxy "x-forwarded-*" issue (remove IPv6 part)

Question

I develop a vue application, which use vite as bundler. It comes with a http server and the http-proxy middleware: https://vitejs.dev/config/server-options.html#server-proxy & https://github.com/http-party/node-http-proxy

I need to set the "x-forwarded-*" headers, for that i set xfwd=true in my vite config:

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const {
    BACKEND_HOST,
    BACKEND_PORT,
    BACKEND_PROTOCOL
} = process.env = Object.assign({
    BACKEND_HOST: "127.0.0.1",
    BACKEND_PORT: "8080",
    BACKEND_PROTOCOL: "http"
}, process.env);

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url))
        }
    },
    server: {
        proxy: {
            "/api": {
                target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
                ws: true,
                xfwd: true
            },
            "/auth": {
                target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
                xfwd: true
            }
        }
    },
    clearScreen: false
});

Headers are present on my backend, but the problem is the "x-forwarded-for" header has a ipv6 part which "breaks" my backend.

E.g.: 'x-forwarded-for': '::ffff:127.0.0.1'

What do i need to change in my vite/http-proxy config to remove the "::ffff:" part?

Answer 1

The option i looking for was "host": https://vitejs.dev/config/server-options.html#server-host

Set that to "0.0.0.0".

export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url))
        }
    },
    server: {
        host: "0.0.0.0",
        proxy: {
            "/api": {
                target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
                ws: true,
                xfwd: true
            },
            "/auth": {
                target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
                xfwd: true
            }
        }
    },
    clearScreen: false
});