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

Question

我是一名桌面开发人员，正在尝试兼职学习一些网络基础知识。我之前组装过一个 asp.net mvc 网站，或多或少工作得不错，目前正在开发一个更简单的、仅 html/css/js 的网站。

网站上的许多页面将包含图像，并附带许多数据，因此我想将所有数据(包括图像的链接)放在一起，并生成 JSON页面加载时的图像列表。我遇到的问题是尝试获取 JSON 文件时的 JavaScript 跨源请求。

我查看了各种解决方案，其中大多数建议启动服务器 - 要么是 asp.net 要么是 node.js 来从中获取 JSON。有几个问题:

• 如果我可以编写引用图像文件的 HTML，为什么我不能从 javascript 获取 json？我在这里缺少一些基本的理解吗？
• 有没有其他方法可以在不启动网络服务器的情况下使用 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

您尝试使用提供的代码完成的任务存在一些问题。

首先，您尝试创建 Ajax请求未托管在 http 服务器上的资源。 Ajax 是 XMLHttpRequest 的包装器 旨在使用 http protocol 获取资源。但是，它可以支持其他协议(protocol)，例如文件和 ftp。

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

那么为什么图像可以使用 file:// 来工作？方案？ <img/>标签支持使用浏览器支持的任何方案加载资源。事实证明大多数浏览器都支持它。

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

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