React+TypeScript+Vite项目如何从Apache获取LDAP用户属性？

1. 确保Apache反向代理传递LDAP相关请求头 #

Apache默认不会主动传递LDAP认证后的自定义属性或特殊头（尤其是下划线开头的变量）到后端服务。你需要在Apache配置中显式指定要转发的头：

# 反向代理基础配置
ProxyPass / http://your-vite-container:5173/
ProxyPassReverse / http://your-vite-container:5173/

# 传递LDAP属性为自定义请求头（避免下划线，用短横线命名）
RequestHeader set X-LDAP-User "%{REMOTE_USER}e"
RequestHeader set X-LDAP-DN "%{AUTHENTICATE_DN}e"
# 根据你的实际LDAP属性替换变量名，比如AUTHENTICATE_mail对应邮箱属性

注意：Apache中LDAP认证后的属性会以AUTHENTICATE_为前缀，你可以通过phpinfo()查看所有$_SERVER变量确认具体名称。

2. 处理CORS与前端请求头暴露问题 #

如果前端通过Vite开发服务器（vite dev）跨域访问Apache，浏览器会过滤非标准请求头，需配置：

Apache端CORS配置 #

Header set Access-Control-Allow-Origin "http://localhost:5173"
Header set Access-Control-Allow-Headers "X-LDAP-User,X-LDAP-DN"
Header set Access-Control-Expose-Headers "X-LDAP-User,X-LDAP-DN"

Vite代理配置（开发环境） #

在vite.config.ts中确保代理保留请求头：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/': {
        target: 'http://your-apache-domain:80',
        changeOrigin: true,
        preserveHeaderKeyCase: true, // 保留头的大小写，避免Apache转换
      },
    },
  },
});

3. 前端正确获取LDAP信息的方式 #

前端无法直接从静态页面的请求中获取Apache设置的请求头，需通过后端接口中转：

编写Vite API接口（获取请求头） #

在src/server/api/ldap-user.ts中创建接口：

import { defineEventHandler } from 'h3';

export default defineEventHandler((event) => {
  // 从Apache传递的请求头中提取信息
  return {
    username: event.node.req.headers['x-ldap-user'],
    dn: event.node.req.headers['x-ldap-dn'],
    // 其他需要的LDAP属性
  };
});

前端调用接口 #

// React组件中调用
async function getLdapUser() {
  try {
    const res = await fetch('/api/ldap-user');
    const data = await res.json();
    console.log('LDAP用户信息:', data);
  } catch (err) {
    console.error('获取用户信息失败:', err);
  }
}

4. 验证Docker网络连通性 #

确保Apache与Vite容器在同一Docker网络内，避免因网络隔离导致请求头丢失。例如docker-compose.yml配置：

version: '3.8'
services:
  apache:
    image: httpd:2.4
    ports: ["80:80"]
    networks: [app-net]
    volumes: [./apache-conf:/usr/local/apache2/conf]
  vite-app:
    build: .
    networks: [app-net]
networks:
  app-net:
    driver: bridge

此时Apache的ProxyPass目标应写为http://vite-app:5173/（使用容器名作为地址）。

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