Nuxt 3 SSR代理x-forwarded-for/x-real-ip传递问题求助

问题分析 #

你在迁移Nuxt 2到Nuxt 3后，使用H3的proxyRequest实现API代理时，后端无法通过x-real-ip或x-forwarded-for获取客户端IP，导致白名单校验失败无法返回Auth Token。以下是针对你疑问的解答和修复方案：

疑问解答 #

1. 这些头通常在哪里设置？

   • 这类IP相关头一般由**反向代理服务器（如Nginx、Cloudflare）**自动添加；如果是应用层代理（如Nuxt中间件），则由代理工具（如Nuxt2的http-proxy-middleware）负责注入。在Nuxt 3的Nitro环境中，H3的proxyRequest提供了xfwd选项自动处理，但需要确保能正确获取客户端原始IP。

2. 是否需要手动设置这些头？

   • 当自动设置失效时（比如当前场景），必须手动设置。因为Nitro的请求上下文获取IP的逻辑和Nuxt2不同，xfwd选项可能无法正确提取到真实客户端IP，此时需要手动从请求上下文提取IP并注入到代理头中。

3. Nitro服务器发起请求时，客户端IP如何传递？

   • 首先从Nitro的event对象中获取真实客户端IP，然后将IP添加到x-real-ip和x-forwarded-for头中，再通过proxyRequest转发给后端。

具体修复步骤 #

1. 修改代理中间件代码

使用H3提供的getRequestIP方法获取真实客户端IP，并手动注入到代理请求头中：

import { defineEventHandler, parseCookies, proxyRequest, getRequestIP, joinURL } from 'h3';
import type { ProxyOptions } from 'h3';

export default defineEventHandler((event) => {
    const config = useRuntimeConfig();
    const cookies = parseCookies(event);
    const clientIp = getRequestIP(event); // 获取真实客户端IP

    const options: ProxyOptions = {
        xfwd: true, // 保留自动处理，同时手动补充头
        headers: {
            token: cookies?.[COOKIE_NAME.TOKEN],
            'x-real-ip': clientIp,
            'x-forwarded-for': clientIp
        }
    };

    const path = event.path.replace(/^\/api\//, '');
    const target = joinURL(config.backendUrl, path);
    return proxyRequest(event, target, options);
});

2. 验证Axios配置（可选）

如果你的前端请求是通过服务端Axios发起的（而非直接走代理中间件），需要确保服务端Axios也传递了IP相关头。修改你的Axios插件：

import axios from 'axios';
import type { AxiosRequestConfig } from 'axios';
import { getRequestIP } from 'h3';

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig();
    const requestHeaders = useRequestHeaders();
    const clientIp = process.server ? getRequestIP(nuxtApp.ssrContext?.event!) : ''; // 服务端获取IP

    const axiosOptions: AxiosRequestConfig = {
        baseURL: process.server ? config.baseUrl : '/',
        withCredentials: true,
        headers: process.server ? {
            ...requestHeaders,
            'x-real-ip': clientIp,
            'x-forwarded-for': clientIp,
            'accept-encoding': 'gzip, deflate'
        } : {}
    };

    const axiosInstance = axios.create(axiosOptions);    
    return {
        provide: {
            axios: axiosInstance
        }
    };
});

3. 额外检查点

• 确认你的Nuxt 3应用是否部署在反向代理之后（如Nginx），如果是，需要在Nginx配置中启用realip模块，确保客户端IP能正确传递到Nitro：

  set_real_ip_from 127.0.0.1; # 替换为你的反向代理IP段
  real_ip_header X-Forwarded-For;
  real_ip_recursive on;
  

• 后端需要配置信任Nuxt 3服务器的IP，避免将Nuxt的IP误认为客户端IP。

内容的提问来源于stack exchange，提问作者Tim