Question

我是一名桌面开发人员，正试图学习一些网络基础知识。我之前已经组建了一个asp.net mvc网站，该网站或多或少都有效，目前正在开发一个更简单的，仅限html / css / js的网站。

网站上的许多页面都会包含图片，并附带一些数据，所以我想我会把所有数据放在一起，包括指向图像的链接并生成页面加载时的图像列表。我遇到的问题是尝试获取JSON文件时的JavaScript交叉原始请求。

我查看过解决方案，他们中的大多数都建议启动服务器 - 使用asp.net或node.js来获取JSON。几个问题：

如果我可以编写引用图像文件的HTML，为什么我不能从javascript中获取json？我在这里缺少一个基本的理解吗？
有没有其他方法可以在不启动Web服务器的情况下使用JSON？我应该尝试将其嵌入到HTML中吗？这是个坏主意吗？
指向具有相关信息的资源的任何其他指针/链接：）

//我的JavaScript：

<script>

        $(document).ready(function(){
            buildGallery('test.json', '#gallery');
        });

        // Builds a collection of thumbnails from the json specified inside of specified div
        function buildGallery(jsonUrl, galleryDiv){
            $.getJSON(jsonUrl, function(data){

                // Ensure the data is in correct format
                if (typeof(data) !== 'object'){
                    return;
                }

                // Build the gallery
                $.each(data['images'], function(key, image){
                    var thumbnail = '<img src="' + image['url'] + '"/>'
                    $(galleryDiv).append(thumbnail);
                });
            });
        }

    </script>

这基于：https://api.jquery.com/jQuery.getJSON/

谢谢堆！

Answer 1

使用提供的代码尝试完成的内容存在一些问题。

首先，您尝试向未在 http 服务器上托管的资源发出Ajax个请求。 Ajax是 XMLHttpRequest 的包装器，用于使用http protocol获取资源。但是，它可以支持其他协议，例如file和ftp。

其次，CORS不受浏览器控制，它由 http 服务器控制。跨域原始请求可以起作用，但前提是您请求的资源使用允许您的域访问它的http标头进行响应。由于您请求的资源与 http 无关，因此可能会出错。

那么为什么图像使用file://方案呢？ <img/>标记支持使用浏览器关心支持的任何方案加载资源。事实证明，大多数浏览器都支持它。

所以如果没有http服务器，我就无法将json带入我的应用程序！@？是和否。不，因为您通常无法使用XMLHttpRequest请求未通过http服务器提供的资源。但是，您仍然可以通过其他方式请求资源。

我建议使用File API从用户文件系统中读取文件。

JavaScript - 阻止跨源请求 - 非服务器解决方案

1 个答案: