Возникли проблемы с загрузкой данных JSON из URL-адреса и отображением в HTML

Question

Я пытаюсь создать программу HTML/JavaScript, которая считывает внешние файлы JSON (через URL), а затем выводит их на веб-страницу в удобном порядке.

Я работаю над этим несколько дней и не могу избавиться от ошибки, которая появляется в консоли Internet Explorer. Ошибка:

SEC7120: источник (URL-адрес моего веб-приложения Azure) не найден в заголовке Access-Control-Allow-Origin. (название моей программы)

SCRIPT7002: XMLHttpRequest: ошибка сети 0x80700013, не удалось завершить операцию из-за ошибки 80700013.

Я могу прочитать первый URL-адрес и прочитать в консоли через 'console.log(data)', но только потому, что он находится в том же исходном домене, что и мой код. Оба находятся в моем каталоге git веб-приложения Azure. Как я могу использовать другие внешние файлы JSON с URL-адресов? Я должен читать всех своих одноклассников из их собственных веб-приложений. Любая помощь очень ценится, я действительно страдаю здесь. У меня есть ощущение, что мне нужно использовать 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"]
}

Заранее спасибо за любую помощь.

Возникли проблемы с загрузкой данных JSON из URL-адреса и отображением в HTML

SEC7120: источник (URL-адрес моего веб-приложения Azure) не найден в заголовке Access-Control-Allow-Origin. (название моей программы)

SCRIPT7002: XMLHttpRequest: ошибка сети 0x80700013, не удалось завершить операцию из-за ошибки 80700013.

Ответы (1)