Вызов данных с https: // blob JSON url и отображение на веб-странице Javascript - PullRequest
Новая
       20

Вызов данных с https: // blob JSON url и отображение на веб-странице Javascript

0 голосов
/ 10 января 2020

Я пытаюсь взять JSON данные из файла https: // blob url JSON и отобразить данные на веб-странице, используя Javascript. JSON Данные - это массив объектов (файлы с данными и форматированием).

В нынешнем виде я использую код: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="shortcut icon" href="#" />
</head>
<body>
        <div id="myDiv"> 
                <image id="div" />
            </div>
        <head>
                <script> 
                    function toDataURL(url, callback) {
                        var xhr = new XMLHttpRequest();
                        xhr.onload = function () {
                            var reader = new FileReader();
                            reader.onloadend = function () {
                                callback(reader.result);
                            }
                            reader.readAsDataURL(xhr.response);
                        };
                        xhr.open('GET', url);
                        xhr.responseType = 'blob';
                        xhr.send();
                    }

                    toDataURL('https://xyz.blob.core.windows.net/xyz/xyz.json', function (dataUrl) { 
                        window.external.notify(dataUrl);
                        document.querySelector("#div").src = dataUrl;
                    })
                </script>

    </script>       


</body>
</html>

Буду признателен за любую помощь. Я не уверен, что это правильный путь для извлечения данных из https: // blob. Кроме того, я получаю следующие две ошибки: 

A cookie associated with a resource at http://localhost/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.

Access to XMLHttpRequest at 
'https://xyz.blob.core.windows.net/xyz.json' from origin 'http://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я прочитал об этих ошибках и понимаю, что могу обойти междоменную ошибку, используя вызов AJAX и используя "jsonp" в качестве типа данных, однако, я стараюсь вообще избегать использования вызова AJAX, если для BLOB-объектов уже создан метод FileReader ().

Заранее спасибо!

1 Ответ

0 голосов
/ 10 января 2020

Вы должны понимать, что термин blob JSON url на самом деле не существует. URL-адрес данных существует, но вам действительно нужно понять, что такое URL-адрес данных :

A URL-адрес данных не является традиционным URL-адресом, поскольку Вы бы поняли это. Это схема URL, которая на самом деле содержит данные в виде строки в кодировке BASE64.

Следующим важным моментом является то, что FileReader не является интерфейсом для работы с URL-адресами данных или любыми URL-адресами. API FileReader полезен, когда у вас есть ссылка File. Обычно вы получаете ссылку File, когда пользователь выбирает или перетаскивает файл на ваш сайт. Здесь важно следующее: File - это ссылка на локальный файл на компьютере, на котором открыт браузер. Метод readAsDataURL API FileReader используется для преобразования File в URL-адрес данных. Это полезно, когда пользователь выбирает файл, и вы хотите показать предварительный просмотр. Тогда вы можете использовать readAsDataURL. Он будет в основном читать этот файл, конвертировать его в BASE64 и добавлять к нему что-то вроде data:image/png;base64, в случае png-изображения перед т.

При этом reader.readAsDataURL(xhr.response); не очень полезная вещь. Если ваш URL действительно нацелен на изображение, вы можете просто сделать <image id="div" src="http://example.com/your-image.png" />. Или что-то вроде document.querySelector("#div").src = yourUrl;. Вам не нужен XMLHttpRequest.

Однако, если ваш URL возвращает JSON и внутри JSON есть URL-адрес данных (или обычный URL-адрес), вам просто нужно получить этот URL-адрес данных. И тогда вы можете сделать document.querySelector("#div").src = yourUrl;. Но в этом случае вам нужно , чтобы сделать запрос AJAX.

На самом деле вы делаете запрос AJAX. XMLHttpRequest - это AJAX.

Краткое примечание о jsonp: не используйте его. Это хак с долгого времени go, вам это не нужно. То, что вы ищете, это CORS. Так что да, если вам нужно получить JSON из другого источника, вам нужно использовать CORS. И вам нужно реализовать это на стороне сервера. Не в вашем javascript. Однако, если ваш URL является прямым BLOB URL, вам не нужно AJAX (и так XMLHTttpRequest.

Последнее замечание о XMLHTttpRequest: если вы пытаетесь использовать современные API: избегайте его Существует намного более чистый и лучший fetch API, который вы должны использовать.

...