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

avatar
mpedzi03
8 апреля 2018 в 01:39
274
1
0

Я пытаюсь создать программу 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"]
}

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

Источник
xianshenglu
8 апреля 2018 в 01:45
1

поищите что-нибудь о CORS, будет много подобных вопросов

Darkrum
8 апреля 2018 в 01:47
1

Человек CORS все время кусает новичков

mpedzi03
8 апреля 2018 в 03:50
0

Есть ли способ обойти проблему с разрешением браузера? Или это тупик и я пытаюсь сделать невозможное.

Darkrum
9 апреля 2018 в 14:29
0

@ mpedzi03 тупик, если вы не контролируете указанные API, другой вариант — проксировать эти API из вашего собственного домена.

Ответы (1)

avatar
Joshua Nelson
8 апреля 2018 в 01:49
0

Вы на правильном пути, поскольку jsonp — это то, что вам нужно, однако сервер, с которого вы запрашиваете, должен поддерживать jsonp, чтобы знать о параметре URL-адреса обратного вызова.

azurewebsite.net должен поддерживать CORS (добавление дополнительных заголовков, чтобы вы могли ПОЛУЧИТЬ JSON) или jsonp.

Darkrum
8 апреля 2018 в 01:57
0

jsonp или json не имеют ничего общего с проблемой CORS.