Backstage插件通过GHE登录时API调用认证问题排查

问题根源 #

你遇到的Unexpected token '<'错误，本质是API返回了HTML页面（大概率是目标API的登录页）而非预期JSON，状态码200是因为登录页本身是正常返回的。原因是登录GHE后，Backstage会在请求中携带用户会话Cookie，目标API误将其当作自身认证凭证，验证失败后返回登录页面，即便添加了dangerously-allow-unauthenticated也无法阻止Cookie传递。

解决步骤 #

1. 修正代理配置，跳过Backstage认证 #

在app-config.yaml的代理配置中添加bypassAuth: true，让Backstage不将用户的GHE认证信息附加到请求中，同时确保路径匹配正确：

proxy:
  '/my-api-proxy':
    target: 'https://你的目标API域名'
    changeOrigin: true
    allowedHeaders: ['Authorization']
    bypassAuth: true # 关键：跳过Backstage的认证拦截
    cookieDomainRewrite: '' # 清除请求中的Cookie，避免目标API误识别

2. 前端请求走Backstage代理路径 #

前端代码不要直接请求目标API，改用代理路径，同时明确要求JSON响应：

const fetchData = async () => {
  try {
    const response = await fetch('/my-api-proxy/目标API路径', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${process.env.REACT_APP_JWT_TOKEN}`,
        'Accept': 'application/json' // 强制要求JSON响应
      }
    });
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    const data = await response.json();
    // 处理返回的数据
  } catch (error) {
    console.error('查询失败:', error);
  }
};

3. 后端插件请求的处理（若使用后端方式） #

如果通过Backstage后端插件发起请求，直接从配置读取JWT Token，不要使用用户的认证上下文：

import { Config, Logger } from '@backstage/config';

export async function fetchApiData(config: Config, logger: Logger) {
  const jwtToken = config.getString('yourPlugin.jwtToken');
  const apiUrl = config.getString('yourPlugin.apiUrl');
  
  const response = await fetch(apiUrl, {
    headers: {
      'Authorization': `Bearer ${jwtToken}`,
      'Accept': 'application/json'
    }
  });

  if (!response.ok) {
    logger.error(`API请求失败，状态码：${response.status}`);
    throw new Error('无法获取API数据');
  }

  return response.json();
}

同时在app-config.yaml中配置插件参数：

yourPlugin:
  jwtToken: ${YOUR_PLUGIN_JWT_TOKEN}
  apiUrl: 'https://你的目标API域名/路径'

4. 验证请求头与响应内容 #

用浏览器DevTools的Network面板检查：

• 请求是否携带了正确的Authorization头
• 响应内容是否为JSON而非HTML
• 请求是否走了Backstage的代理路径

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