如何使用 API-Token 从 REST API 获取数据

Question

我正在尝试通过将 Axios 库用于 http 请求，从我的 React 应用程序中的 Jira Rest API 获取数据。为了通过 Jira API 访问数据，需要 API 令牌。我在我的 Jira 帐户设置中生成了一个 API 令牌，但我不知道如何将它包含在我的 http 请求中以获得访问权限。

这是 Jira 文档提供的用于从 Jira 板获取问题的端点：

curl -u admin:admin http://localhost:8080/jira/rest/api/2/issue/TEST-10 | python -mjson.tool

这是用于将数据设置为获取的数据的 React 状态挂钩：

    const [jiraTicket, setJiraTicket] = useState([]);

这是 API 请求的 fetch 函数（${} 将被用户输入填充）：

    function getJiraTicket() {
    axios.get(`${username}:${apiToken}@Content-Type:application/json/https:/${jiraSiteName}.atlassian.net/rest/api/2/issue/${projectKey}-${ticketId}`)
        .then((res) => {
            const data = res.data;
            setJiraTicket(data);
        })
}

react 组件 return 内的按钮应该调用 fetch 函数：

return(
   <Container>
      <Button onClick{getJiraTicket()}>Fetch Jira Ticket</Button>
   </Container>
);

这是我目前遇到的错误，因为授权没有按照我的方式工作 （我替换了本示例中提供的用户名、API 令牌等）：

GET http://localhost:3000/username:apitoken@https:/sitename.atlassian.net/rest/api/2/issue/projectkey-ticketid 404（未找到）

编辑：

我目前的做法：

    function getJiraTicket() {
    axios.get(`${userName}:${apiToken}@https://${siteName}.atlassian.net/rest/api/2/issue/${projectId}-${ticketId}`,{
        auth: {
            username: userName,
            password: apiToken,
        },
        withCredentials: true
    })
        .then((res) => {
            const data = res.data;
            console.log(data);
            setJiraTicket(data);
        })
        .catch(err => {
            // This error means: The request was made and the server responded with a status code
            if(err.res) {
                console.log(err.res.data);
                console.log(err.res.status);
                console.log(err.res.headers);
                console.log("request was made and server responded with status");
            // The request was made but no response was received
            } else if (err.request) {
                console.log(err.request);
                console.log("request was made, but no response was received");
            // Something happened in setting up the request that triggered an error
            } else {
                console.log("Error", err.message);
                console.log("request is note set up correctly");
            }
            console.log(err.config);
        })

当前错误，我根据 axios 文档定义：“请求已发出，但未收到响应”

在 Postman 中运行良好的端点（Postman 中提供了基本身份验证）： https://sitename.atlassian.net/rest/api/2/issue/projectid-ticketid

Answer 1

更新：当应用程序尝试直接访问 Jira API 端点时，不允许 CORS 访问。进行此限制是为了防止对特定 Jira 站点的随机身份验证请求，因为访问是基于基于会话的身份验证。但是如果使用 OAuth 2.0 而不是基本身份验证，则可以访问 API 端点，因为应用程序将通过此链接将用户重定向到 Jira 身份验证本身：

https://auth.atlassian.com/authorize?观众=api.atlassian.com&
client_id=YOUR_CLIENT_ID&
范围=REQUESTED_SCOPE_ONE%20REQUESTED_SCOPE_TWO&
redirect_uri=https://YOUR_APP_CALLBACK_URL&
state=YOUR_USER_BOUND_VALUE& response_type=code& prompt=consent

来源：https://developer.atlassian.com/cloud/jira/platform/oauth-2-3lo-apps/#known-issues

Answer 2

Axios 为 get/post 使用标题配置，因此您不应将它们包含在您的 URL 中。下面是一个关于如何构造 URL 和应用标头的一般示例：

let axiosUrl = `https://${jiraSiteName}.atlassian.net/rest/api/2/issue/${projectKey}-${ticketId}`
axios({
    baseURL: axiosUrl,
    method: 'get',
    headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin", "*"
    },
    //timeout: 2000,
    auth: {
        username: userName,
        password: apiToken,
    }
})
    .then((res) => {
        setJiraTicket(res.data);
    })
     .catch(function (error) {
         console.log(error);
     });