使用 JavaScript 在浏览器中模拟通过 Web 链接获取 Jira JSON 数据答案

【问题标题】：Emulate getting Jira JSON data via web link in browser with JavaScript使用 JavaScript 在浏览器中模拟通过 Web 链接获取 Jira JSON 数据
【发布时间】：2015-11-25 19:54:37
【问题描述】：

我不确定如何问这个问题。我无法轻松访问我的公司站点以使用普通的 AJAX 调用来尝试此操作，因此我需要解决跨域问题以及可能更改我们 Jira 服务器上的设置。因为这周我整个星期都在家里度假，但感恩节前有点无聊，我想我会玩这个，这样我就可以开始上周五刚刚分配的项目了。

使用Jira Rest API，如果我将https://jira.atlassian.com/rest/api/2/project放到浏览器（Chrome）中并按回车，我会在浏览器中返回有效的JSON数据。当然，您必须拥有有效的 Jira 凭据并且已经登录到该站点才能正常工作（否则您只会收到[] 的回复），但对于我正在做的实验来说，这没关系。我只是想生成一些有效的数据，我可以将它们转换成一个表单。

如何在 JavaScript 中以自动方式执行此操作，以便返回的 JSON 进入一个变量，我可以使用该变量进行后续数据操作？理想情况下，这应该适用于我们真正的 Jira 网站，但如果它只适用于这个问题中链接的网站，我很好，正如我所说，我只是在做一些实验，试图读取项目数据和相关属性。

我试过了（cite）：

$.getJSON("https://jira.atlassian.com/rest/api/2/project?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

我也尝试过简单地将字符串 eval() 转换为变量，但这也不起作用。

我最终的项目很可能是在 jQuery / jQuery Mobile 中，但是直接的 JS 答案很好，如果有必要，我可以稍后将其转换为 jQuery。

编辑：

这是我用来测试它的 HTML 以及正在提出的建议，几乎直接来自 https://html5boilerplate.com/：

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <p>Hello world! This is HTML5 Boilerplate.</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
        var result = $.get("https://jira.atlassian.com/rest/api/2/project");
        console.log(result);
    </script>
</body>

【问题讨论】：

为什么不直接用AJAX调用，然后处理返回值呢？
当我尝试这样做时，我得到：Refused to execute script from 'https://jira.jira.atlassian.com/rest/api/latest/project?callback=jQuery111307598869814537466_1448485455829&_=1448485455830' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled. 就像我说的，我无法（轻松）从家里访问 Jira 服务器，所以我无法更改任何设置。
$.get(...怎么样？你在哪一行得到这个错误？尝试删除?callback=? 也
使用 $.get 或 $.post，我收到：XHR failed loading: GET "https://jira.atlassian.com/rest/api/2/project?callback=?".
删除?callback=?，我得到一个不同的错误：XMLHttpRequest cannot load https://jira.atlassian.com/rest/api/2/project. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

标签： javascript jquery json ajax jira-rest-api

【解决方案1】：

所以使用 AJAX / .get 等是错误的方法（至少对于这个实验，当我可以访问 JIRA 服务器时，它是正确的答案）。

我发现有用的是：

location.href = "https://jira.atlassian.com/rest/api/2/project";
var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);
console.log(data);

这不是一个完美的答案，因为它用来自 JIRA 的 JSON 响应替换了网页的正文，但它允许我继续前进。我在this SO post 中找到了几种不同的尝试方法。

这是整个网页：

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <p>Get JIRA data</p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript">
        location.href = "https://jira.atlassian.com/rest/api/2/project";
        var data = document.getElementsByTagName('body')[0].innerText;
        console.log(data);
    </script>
</body>
</html>

它不能正常工作的原因是你仍然必须追究事实并在控制台中获取数据：

var data = JSON.parse(document.getElementsByTagName('body')[0].innerText);

但这会为您提供一组 JIRA 对象，然后您可以对其进行操作。

在答案中添加this SO question，因为它包含有关解决 CORS（跨源资源共享）的有用信息。

【讨论】：