ReactJS, trying to get access JSON data from REST API from JIRA, but unable to do so.

Question

I've been stuck for a few hours trying to figure out why I cant access and transfer data in my array from the JSON data in JIRA using the REST API. In short, with the Basic Authentication given by the JIRA REST API documentation found here: https://developer.atlassian.com/server/jira/platform/basic-authentication/ , I am trying to get the JSON data within the JIRA website through URL. In the console log of my localhost page, I seem to get the following error message: Cross-Origin Read Blocking (CORB) blocked cross-origin response. Not too sure how to solve this, the data in my array is empty (trying to get all the JSON data within this array, however not working). I am unsure if I fetched the data completely well based on the format I looked up through internet in the componentDidMount() method.

Any help is appreciated.

const base64 = require('base-64');

constructor(props)
{
   super(props);
   isLoaded: false,
   jiraData: []
}

componentDidMount()
{
   let headers = new Headers();
   headers.append("Content-Type", "application/json");
   headers.append("Accept", "application/json");
   headers.append('Authorization', 'Basic ' + 
   base64.encode('hiddenusername:hiddenpassword'));

   fetch('http://ksr-ca-qmaltjira.ca.kronos.com:8061/rest/api/2/search?jql=project=SUP&maxResults=2', {method:'GET', headers: headers})
   .then(res => res.json())
   .then(res => {
      this.setState(
      {
        isLoaded: true,
        tableHeight: height + "px",
        jiraData: res
      });

    });

}


render()
{
  var { isLoaded, jiraData } = this.state;
  //Checking whether there is data in my array 
  const emptyOrNot = !!jiraData.length && !!jiraData.length ? <p>not empty</p> : <p>empty</p>
}

return(
 <div className="App">
 {emptyOrNot}
 </div>
)

Answer 1

Please read about CORS in other answers for an explanation on this. Basically, you cannot make requests from a web page to a server with a different origin, unless you have configured it to allow cross-origin requests. And since you do not have control over Jira, you cannot do this.

Furthermore, even if you could do this I'd highly recommend against it, because you're exposing your username and password to anyone who visits your webpage.

The correct way to build this is to create your own API, which can talk to Jira without having to deal with the CORS issue (CORS only applies to requests coming from the browser). You can then serve your React application from here, or enable CORS and serve the React app from wherever. This also protects your Jira credentials, because they will not be exposed in the client application.