Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

The attempt to utilize Jira REST API with JavaScript proved unsuccessful.

I am experimenting with a single-page application for incorporating Jira's data.

Here is the given code:

async function getJiraIssue(issueId) {        
    try {
        let uri = 'https://my.jira.server/rest/api/latest/search?jql=id='+issueId;
        let response = await fetch(uri, {
            headers: {'Authorization': `Bearer MYJIRAPERSONALACCESSTOKEN`},
            redirect: 'error'
        });
        let data = await response.json();
        return data;
    } catch (err) {
        return Promise.reject(err);
    }
}
During testing in Chrome (and debugging via the Developer's Tool), the fetch line consistently resulted in the error Failed to load resource: net::ERR_FAILED. However, the same request worked on curl, i.e., curl -H "Authorization: Bearer MYJIRAPERSONALACCESSTOKEN" https://my.jira.server/rest/api/latest/search?jql=id=PROJ1-123. I read about it on Calling JIRA REST Api from Javascript in local HTML file, but I cannot determine if it is the same issue.

Is this connected to Jira API authentication? What is it exactly that is amiss or done incorrectly?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
The error message "Failed to load resource: net::ERR_FAILED" is usually caused by a network error. It means that the browser was unable to retrieve the requested resource from the server due to a network error. This error can occur for several reasons such as CORS policy, server down, or network connectivity issues. In your case, it seems that the issue is related to the CORS policy. The Jira API server is not allowing your website to access its resources due to the same-origin policy. This policy restricts web pages from making requests across different domains. To fix this issue, you can try adding the following headers to your fetch request:
headers: {
    'Authorization': `Bearer MYJIRAPERSONALACCESSTOKEN`,
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
}
This will allow your website to access the Jira API resources. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
a month ago
This error is related to CORS (Cross-Origin Resource Sharing) policy of the browser. When running JavaScript code in the browser, the browser enforces a security policy that only allows requests to the same origin (protocol, domain, and port) as the page making the request. Since the Jira server and the local page loading the JavaScript have different origins, the browser blocks the request. To solve this issue, you need to enable CORS on the server-side by sending the appropriate response headers or use a proxy to forward the request through a server-side script that can handle the request for you. In this case, you can try to add the following header to the response from the Jira server:
This header allows any origin to access the resource. If you do not want to allow access from any origin, you can replace the * with the domain of the page(s) that should be allowed. If you do not have access to the Jira server to modify the response headers, you can use a proxy to forward the request. In this case, you would make a request to your own server, which would then forward the request to the Jira server and return the response to the JavaScript code running in the browser. Keep in mind that using a proxy adds an additional layer of complexity and could have performance implications.
;