如何使用API令牌从REST中获取数据

Question

我试图从我的React应用程序中的Jira Rest API中获取数据，方法是为http请求使用Axios库。为了通过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请求的提取函数(${}将填充用户输入)：

    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);
        })
}

function组件返回中的按钮应该调用fetch函数：

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

这是我目前正在获得的错误，因为授权不像我所做的那样工作(我替换了提供的用户名、API令牌等等)：

获取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中提供了基本的auth )：https://sitename.atlassian.net/rest/api/2/issue/projectid-ticketid

Answer 1

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

https://auth.atlassian.com/authorize？audience=api.atlassian.com&

client_id=YOUR_CLIENT_ID&

scope=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);
     });