从 URL 加载 JSON 数据并在 HTML 中显示时遇到问题答案

【问题标题】：Having trouble loading JSON data from URL and displaying in HTML从 URL 加载 JSON 数据并在 HTML 中显示时遇到问题
【发布时间】：2018-09-17 17:03:03
【问题描述】：

我正在尝试创建一个 HTML/JavaScript 程序来读取外部 JSON 文件（通过 URL），然后以列出的顺序将它们输出到网页。

我已经为此工作了好几天，但我似乎无法解决 Internet Explorer 控制台中弹出的错误。错误是：

SEC7120：在 Access-Control-Allow-Origin 标头中找不到来源（我的天蓝色 webapp URL）。（我的程序名称）

SCRIPT7002：XMLHttpRequest：网络错误 0x80700013，由于错误 80700013，无法完成操作。

我能够读取第一个 URL 并通过“console.log(data)”在控制台中读取，但这只是因为它与我的代码位于同一源域中。两者都在我的 Azure webapp git 目录中。我如何还可以通过 URL 中的其他外部 JSON 文件？我必须从他们自己的网络应用程序中阅读所有同学。非常感谢任何帮助，我在这里真的很痛苦。我觉得我需要使用 JSONp，因此使用 $.ajax() 而不是 $.getJSON()。？我正在使用 JQUERY。我的代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Klump Test</h1>
<p><input onclick="AddStudent()" type="button" value="Add Student"/></p>

<script>
var urls = ["https://michael-pedzimaz-webapp.azurewebsites.net/my-information.json",
            "https://jakeisalsoclueless.azurewebsites.net/myinformation.json",
            "https://riotjuice.azurewebsites.net/my-information.json",
            "https://softwareengjmh.azurewebsites.net/format.JSON",
            "https://newtestdocument.azurewebsites.net/Format.json"];

function AddStudent(){
    var person = prompt("Please enter your json url:", "");
    //var _person = person + '?callback=?';
    getJson(person);
 }
</script>

<input onclick="getJson(urls[0])" type="button" value="Mike's JSON"/>
<input onclick="getJson(urls[1])" type="button" value="Jake's JSON"/>
<input onclick="getJson(urls[2])" type="button" value="Julian's JSON"/>
<input onclick="getJson(urls[3])" type="button" value="Jace's JSON"/>
<input onclick="getJson(urls[4])" type="button" value="Thad's JSON"/>

<div class="mypanel"></div>

<script>
function getJson(url){
    $.getJSON(url, function(data){
        console.log(data);
        var info = 'First name: ${data.FirstName}<br> Last Name: ${data.LastName}<br> Preferred Name: ${data.PreferredName}<br> Team Name: ${data.TeamName}<br> Seat Location: ${data.SeatLocation}<br> Role: ${data.Role}<br>'

        $(".mypanel").html(info);
    });
}
</script>
</body>
</html>

所有 JSON 文件的格式：

{
"FirstName":"Michael",
"LastName":"Pedzimaz",
"PreferredName":"Mike",
"TeamName":"The Ocelots",
"SeatLocation":"1-2",
"Role":["UI Designer"]
}

提前感谢您的帮助。

【问题讨论】：

搜索一下CORS，会有很多类似的问题
CORS 人总是咬新人
有没有办法绕过浏览器权限问题？或者这是一个死胡同，我正在尝试做不可能的事情。
@mpedzi03 死胡同，除非您控制所说的 API，否则您的另一个选择是从您自己的域中代理这些 API。

标签： javascript jquery html json getjson

【解决方案1】：

您在正确的轨道上使用 jsonp 是您所需要的 - 但是，您请求的服务器需要支持 jsonp 才能真正了解 ?callback URL 参数。

azurewebsite.net 需要支持 CORS（添加额外的标头以让您获取 JSON）或 jsonp。

【讨论】：

jsonp 或 json 与 CORS 问题无关。

SEC7120：在 Access-Control-Allow-Origin 标头中找不到来源（我的天蓝色 webapp URL）。 （我的程序名称）

SCRIPT7002：XMLHttpRequest：网络错误 0x80700013，由于错误 80700013，无法完成操作。

SEC7120：在 Access-Control-Allow-Origin 标头中找不到来源（我的天蓝色 webapp URL）。（我的程序名称）