Jira工单面板应用调用外部接口无响应问题求助

核心问题排查点 #

• Forge fetch的跨域配置错误：@forge/api的fetch是在Atlassian服务端执行的，不需要设置mode: "cors"，这个配置会干扰请求正常发起。
• URL拼接异常：检查url常量是否带末尾斜杠，拼接后是否形成有效完整URL，比如url如果是https://api.example.com，拼接后会变成https://api.example.comexperience/...，直接导致请求地址无效。
• useEffect依赖缺失：原代码useEffect依赖为空，组件初始化时productContext.platformContext.issueKey可能还未加载完成，传入的是undefined，导致请求URL不合法。
• 未处理HTTP错误状态：Forge的fetch不会把4xx/5xx状态码转为Promise拒绝，即使请求发出去了但返回错误，也不会进入catch块，容易误以为请求没执行。

修正后的代码 #

import ForgeUI, {
  IssuePanel,
  useProductContext,
  useEffect,
} from "@forge/ui";
import { url } from "./constants";
import { fetch } from "@forge/api";

const Panel = () => {
  const productContext = useProductContext();

  const fetchTaskItems = async (issueID) => {
    // 先校验issueID是否存在
    if (!issueID) {
      console.log("Issue ID未获取到");
      return;
    }

    // 移除无用的cors配置
    const requestOptions = {
      method: "GET",
      headers: { "Content-Type": "application/json" },
    };

    try {
      console.log("try");
      // 规范URL拼接，避免路径错误
      const fullUrl = `${url}/experience/task/item/${issueID}`;
      console.log("请求URL:", fullUrl); // 打印URL方便排查
      const res = await fetch(fullUrl, requestOptions);
      
      // 手动检查响应状态，抛出HTTP错误
      if (!res.ok) {
        throw new Error(`请求失败，状态码: ${res.status}`);
      }

      console.log("响应结果:", res);
      // 如果需要解析响应体，添加下面代码
      // const data = await res.json();
      // console.log("响应数据:", data);
    } catch (err) {
      console.log("请求错误:", err.message);
    }
  };

  useEffect(() => {
    const currentIssueId = productContext.platformContext?.issueKey;
    console.log("当前Issue ID:", currentIssueId);
    fetchTaskItems(currentIssueId);
  }, [productContext.platformContext?.issueKey]); // 添加依赖，确保issueKey更新时重新触发请求

  // 原代码缺少return，必须返回IssuePanel组件
  return <IssuePanel>面板内容</IssuePanel>;
};

export default Panel;

额外必做检查 #

1. 配置外部域名权限：在manifest.yml中添加外部API的访问权限，否则Forge会拦截请求：

   permissions:
     external:
       fetch:
         - 'https://你的外部API域名/*'
   

2. 查看Forge服务端日志：浏览器控制台可能看不到服务端的请求错误，执行forge logs命令查看详细日志，定位具体问题。

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