Fiware Keyrock中用jQuery无法获取AJAX响应头X-Subject-Token

问题 #

使用Fetch API发起AJAX请求时，无法获取响应中的自定义请求头X-Subject-Token。浏览器开发者工具确认该响应头已存在，但通过response.headers.get("X-Subject-Token")仅能获取Content-Type、Content-Length和Cache-Control等默认头。已配置Keyrock的CORS环境变量允许该自定义头，但问题仍存在。

前端代码 #

async function submitHandler(e) {
    e.preventDefault();
    let BASE_URL = "http://{my-ip}:3005"
    if (usernameInput.value && passwordInput.value) {

        let json = {
            name: usernameInput.value,
            password: passwordInput.value
        }

        console.log(json)

        try {
            let response = await fetch(`${BASE_URL}/v1/auth/tokens`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(json)
            });

            if (response.ok) {
                let token = String(response.headers.get("X-Subject-Token"))
                console.log(token)
                response.headers.forEach(h=>{
                    console.log(h)
                })
            }
            let data = await response.json();
            console.log(data);
        } catch (err) {
            console.log(err)
        }
    }
}

Keyrock CORS配置（Docker Compose） #

keyrock:
  image: quay.io/fiware/idm:${KEYROCK_VERSION}
  container_name: fiware-keyrock
  hostname: keyrock
  networks:
    default:
      ipv4_address: 172.18.1.5
  depends_on:
    - mysql-db
    - authzforce
  ports:
    - "${KEYROCK_PORT}:${KEYROCK_PORT}" # localhost:3005
  environment:
    - DEBUG=idm:*
    - IDM_DB_HOST=mysql-db
    - IDM_DB_PASS_FILE=/run/secrets/my_secret_data
    - IDM_DB_USER=root
    - IDM_HOST=http://localhost:${KEYROCK_PORT}
    - IDM_PORT=${KEYROCK_PORT}
    - IDM_HTTPS_PORT=${KEYROCK_HTTPS_PORT}
    - IDM_ADMIN_USER=alice
    - IDM_ADMIN_EMAIL=alice-the-admin@test.com
    - IDM_ADMIN_PASS=test
    - IDM_PDP_LEVEL=advanced
    - IDM_AUTHZFORCE_ENABLED=true
    - IDM_AUTHZFORCE_HOST=authzforce
    - IDM_AUTHZFORCE_PORT=${AUTHZFORCE_PORT}
    - IDM_CSP_FORM_ACTION=*
    - IDM_CORS_ENABLED=true
    - IDM_CORS_ORIGIN=*
    - IDM_CORS_METHODS=GET,HEAD,PUT,PATCH,POST,DELETE
    - IDM_CORS_ALLOWED_HEADERS=content-type,X-Auth-Token,Tenant-ID,Authorization,Fiware-Service,Fiware-ServicePath,NGSILD-Tenant,NGSILD-Path,X-Subject-Token
    - IDM_CORS_CREDENTIALS=true
    - IDM_CORS_PREFLIGHT=true
    - IDM_CORS_EXPOSED_HEADERS=content-type,X-Auth-Token,Tenant-ID,Authorization,Fiware-Service,Fiware-ServicePath,NGSILD-Tenant,NGSILD-Path,X-Subject-Token

原因分析 #

1. CORS暴露头配置格式错误：Keyrock的IDM_CORS_EXPOSED_HEADERS变量中，头字段间的逗号后带有空格，部分服务器会解析失败，导致X-Subject-Token未被标记为可暴露给前端的头。
2. 配置未生效：若修改环境变量后未重启Keyrock容器，新配置不会生效，服务端仍返回旧的CORS响应头。
3. API混淆：你提到使用jqXHR.getResponseHeader，但实际代码用的是Fetch API，不过两者获取自定义头的前提都是服务端正确配置Access-Control-Expose-Headers。

解决方案 #

1. 修正CORS配置格式 #

修改Keyrock的IDM_CORS_EXPOSED_HEADERS环境变量，去掉逗号后的空格，改为纯逗号分隔：

- IDM_CORS_EXPOSED_HEADERS=content-type,X-Auth-Token,Tenant-ID,Authorization,Fiware-Service,Fiware-ServicePath,NGSILD-Tenant,NGSILD-Path,X-Subject-Token

同步检查IDM_CORS_ALLOWED_HEADERS的格式，确保一致。

2. 重启Keyrock容器 #

执行命令让新配置生效：

docker-compose restart keyrock

3. 验证服务端响应头 #

在浏览器开发者工具的Network标签中，找到对应请求，查看响应头中的Access-Control-Expose-Headers，确认X-Subject-Token已包含在内。

4. 优化前端代码（可选） #

调整Fetch API的头遍历方式，更清晰查看所有可访问的响应头：

if (response.ok) {
  const token = response.headers.get('X-Subject-Token');
  console.log('X-Subject-Token:', token);
  // 遍历所有可见的响应头键值对
  for (const [key, value] of response.headers.entries()) {
    console.log(`${key}: ${value}`);
  }
}
const data = await response.json();

如果确实使用jQuery的AJAX，代码应改为：

$.ajax({
  url: `${BASE_URL}/v1/auth/tokens`,
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(json),
  success: function(data, textStatus, jqXHR) {
    const token = jqXHR.getResponseHeader('X-Subject-Token');
    console.log(token);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error(errorThrown);
  }
});

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