从https://blobJSON url调用数据并显示在Javascript网页中_Javascript_Json_Xmlhttprequest_Blob

从https://blobJSON url调用数据并显示在Javascript网页中

javascript json

从https://blobJSON url调用数据并显示在Javascript网页中,javascript,json,xmlhttprequest,blob,Javascript,Json,Xmlhttprequest,Blob,我试图从https://blobURL JSON文件中获取JSON数据，并使用Javascript在网页中显示数据。JSON数据是一个对象数组（包含数据和格式的文件）目前，我使用的代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript - read JSON from URL</title> <script src="https://code.jqu

我试图从https://blobURL JSON文件中获取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>

我已经读过这些错误，并且意识到我可以通过使用AJAX调用和使用“jsonp”作为数据类型来避免跨域错误，但是，如果已经为BLOB构建了FileReader（）方法，我将尽量避免使用AJAX调用

提前谢谢你

您需要了解术语blobjsonurl实际上并不存在。数据URL存在，但您确实需要了解数据URL是什么：

数据URL不是您所理解的传统URL。它是一个URL方案，实际包含BASE64编码字符串形式的数据

接下来重要的一点是，

FileReader

不是处理数据URL或任何URL的接口。当您有

文件

参考时，

文件阅读器

API非常有用。当用户选择文件或将文件放入您的网站时，您通常会得到一个

文件

引用。这里重要的一点是：

文件

是对打开浏览器的计算机上本地文件的引用。

FileReader

API的

readAsDataURL

方法用于将

文件

转换为数据URL。当用户选择文件并希望显示预览时，这非常有用。然后可以使用

readAsDataURL

。它基本上会读取该文件，将其转换为BASE64，并预先添加类似于

data:image/png的内容；base64，

对于t前面的png图像

也就是说

reader.readAsDataURL（xhr.response）并不是一件真正有用的事情。如果您的url实际上指向一个图像，您可以执行
。或者类似于document.querySelector（“#div”）.src=yourUrl。您不需要XMLHttpRequest
但是，如果您的URL返回一个JSON，并且JSON中是一个数据URL（或普通URL），那么您只需要检索该数据URL。然后您可以执行document.querySelector（“#div”）.src=yourUrl。但在这种情况下，您需要发出AJAX请求
实际上，您正在发出一个AJAX
请求XMLHttpRequest
是AJAX
关于jsonp
：不要使用它。这是很久以前的黑客攻击，你不需要它。您要找的是CORS
。是的，如果您需要从不同的来源检索JSON，您需要使用CORS。您需要在服务器端实现这一点。不在javascript中。
但是，如果您的url是直接的BLOB
url，则不需要AJAX（因此XMLHTttpRequest
）
关于XMLHTttpRequest
的最后一点注意事项：如果您试图使用现代API，请避免使用它。您应该使用更干净、更好的fetch
API
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.