Confluence Forge应用后端Fetch权限报错求助：Imgur API集成问题

问题背景 #

开发Confluence Forge应用，通过Imgur API拉取热门图片展示在Confluence页面中，已在manifest.yml配置了Imgur域名的出口权限，但仍收到403错误：

message: 'URL not included in the external fetch backend permissions: https://api.imgur.com/3/gallery/hot/viral/0.json. Visit go.atlassian.com/forge-egress for more information.',
name: 'REQUEST_EGRESS_ALLOWLIST_ERR',
status: 403

应用核心代码（JSX）：

import ForgeUI, { render, Fragment, Macro, Text, Image, useState, useEffect } from "@forge/ui";
import { fetch } from '@forge/api';

const IMGUR_API_ENDPOINT = 'https://api.imgur.com/3/gallery/hot/viral/0.json';

const App = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(IMGUR_API_ENDPOINT, {
                    headers: {
                        'Authorization': 'Client-ID <client-id>' // 替换为你的Client-ID
                    }
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const result = await response.json();
                console.log("Received data:", result);
                setData(result.data);
                setLoading(false);
            } catch (err) {
                console.error("Error occurred:", err);
                setError(err);
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    if (loading) return <Text>Loading images...</Text>;
    if (error) return <Text>Error: {error.message}</Text>;

    return (
        <Fragment>
            <Text>Hot Images from Imgur:</Text>
            {data && data.map(image => (
                <Fragment key={image.id}>
                    <Image src={image.link} alt={image.title} />
                    <Text>{image.title}</Text>
                </Fragment>
            ))}
        </Fragment>
    );
};

export const run = render(
    <Macro
        app={<App />}
    />
);

初始manifest.yml配置：

modules:
    macro:
      - key: imgur-gallery-macro
        function: main
        title: Imgur Gallery Viewer
        description: View hot images from Imgur in Confluence.
    function:
      - key: main
        handler: index.run
  app:
    id: ari:cloud:ecosystem::app/<removed>
  permissions:
    external:
      fetch:
        backend:
          - 'https://api.imgur.com/*'

解决方案排查步骤 #

1. 修复manifest.yml的缩进问题 #

Forge对YAML格式的缩进要求严格，所有顶级节点（modules、app、permissions）必须左对齐，不能有多余的前置空格。修正后的正确格式：

modules:
  macro:
    - key: imgur-gallery-macro
      function: main
      title: Imgur Gallery Viewer
      description: View hot images from Imgur in Confluence.
  function:
    - key: main
      handler: index.run
app:
  id: ari:cloud:ecosystem::app/<removed>
permissions:
  external:
    fetch:
      backend:
        - 'https://api.imgur.com/*'

2. 验证权限配置并强制生效 #

• 修改manifest.yml后，必须重新部署：
  • 开发环境：执行forge tunnel --watch，确保隧道重启加载新配置
  • 生产环境：执行forge deploy
• 用forge inspect命令检查应用的权限配置，确认external.fetch.backend中确实包含https://api.imgur.com/*

3. 确认依赖包版本 #

更新@forge/api到最新版本，避免旧版本的兼容性问题：

npm update @forge/api

更新后重新部署应用。

4. 关于OAuth的说明 #

你调用的Imgur画廊API仅需要携带Client-ID请求头即可匿名访问，不需要完整的OAuth流程，当前代码中的头配置是正确的，403错误来自Forge的出口权限限制，而非Imgur API的权限校验。

5. 排查环境与日志 #

• 确认你修改的是当前运行环境对应的manifest.yml（避免混淆开发/生产环境配置）
• 执行forge logs查看详细请求日志，确认实际请求的URL和配置的权限规则是否完全匹配

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