javascript - ReactJS，尝试从 JIRA 的 REST API 获取 JSON 数据，但无法这样做。

Question

我花了几个小时试图弄清楚为什么我无法使用 REST API 从 JIRA 中的 JSON 数据访问和传输数组中的数据。简而言之，通过此处找到的 JIRA REST API 文档给出的基本身份验证:https://developer.atlassian.com/server/jira/platform/basic-authentication/ ，我试图通过 URL 获取 JIRA 网站内的 JSON 数据。在我的本地主机页面的控制台日志中，我似乎收到以下错误消息:跨源读取阻止 (CORB) 阻止跨源响应。不太确定如何解决这个问题，我的数组中的数据是空的(尝试获取此数组中的所有 JSON 数据，但不起作用)。我不确定根据我在 componentDidMount() 方法中通过互联网查找的格式是否完全正确地获取了数据。

感谢任何帮助。

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

请read about CORS in other answers对此进行解释。基本上，您不能从网页向具有不同源的服务器发出请求，除非您已将其配置为允许跨源请求。由于您无法控制 Jira，因此您无法执行此操作。

此外，即使您可以这样做，我也强烈建议您不要这样做，因为您会将您的用户名和密码暴露给访问您网页的任何人。

正确的构建方法是创建您自己的 API，它可以与 Jira 通信，而无需处理 CORS 问题(CORS 仅适用于来自浏览器的请求)。然后，您可以从此处为您的 React 应用程序提供服务，或者启用 CORS 并从任何地方为 React 应用程序提供服务。这也可以保护您的 Jira 凭据，因为它们不会在客户端应用程序中公开。