在Qwik与Qwik City中获取NGINX转发Header项的问题

问题分析 #

NGINX配置了转发Header（包括自定义的Locale），但Qwik City的requestEvent.headers为空，无法获取任何Header信息，核心原因可能是NGINX配置顺序不当、Header未被服务器信任，或是获取方式有误。

解决方案 #

1. 修复Qwik代码语法错误 #

原代码中对象属性赋值存在语法错误，需修正为标准格式：

import { component$ } from '@builder.io/qwik'
import { routeLoader$ } from '@builder.io/qwik-city'

const getData = routeLoader$(async (requestEvent) => {
    // 遍历所有Header输出
    for (const [key, value] of requestEvent.headers.entries()) {
        console.log(`${key}: ${value}`);
    }
    const data = {
        title: 'test' // 修正为冒号赋值，字符串添加引号
    };
    return data;
})

const Contact = component$(() => {
    const data = getData().value;
    return <>
      <h1>Hello World </h1>
    </>;
})

export default Contact;

2. 调整NGINX配置 #

• 将rewrite规则移至proxy_pass之前，确保$locale变量被正确捕获后再设置Header
• 自定义Header建议添加X-前缀（符合HTTP规范，避免被中间件过滤）
  修改后的location块：

location / {      
    rewrite ^/(?<locale>\w\w)(/.*)$ $2 break;
    proxy_set_header X-Locale $locale;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
    proxy_pass http://localhost:89696;
}

3. 配置Qwik City信任代理 #

Qwik City默认不会信任代理服务器的转发Header，需开启信任配置：

• 开发环境：修改qwik-city.config.ts

import { defineConfig } from '@builder.io/qwik-city/vite';

export default defineConfig({
  server: {
    trustProxy: true, // 信任所有代理，或指定具体IP如'127.0.0.1'
  },
});

• 生产环境：若使用Node.js服务器（如Express）启动Qwik City，需在启动代码中添加：

import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
import express from 'express';

const app = express();
app.set('trust proxy', true); // 开启代理信任

const { router, notFound } = createQwikCity();
app.use(router);
app.use(notFound);

app.listen(89696);

4. 正确获取Header #

HTTP Header大小写不敏感，需使用headers.get()方法指定key（建议用小写）：

const getData = routeLoader$(async (requestEvent) => {
    const locale = requestEvent.headers.get('x-locale');
    const forwardedProto = requestEvent.headers.get('x-forwarded-proto');
    console.log('Locale:', locale);
    console.log('Forwarded Proto:', forwardedProto);
    // 其他业务逻辑
});

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