JavaScript-交叉原点请求阻止 - 非服务器解决方案



我是一个试图在侧面学习一些网络基础知识的桌面开发人员。我以前已经整理了一个ASP.NET MVC网站,该网站或多或少都可以正常工作,目前正在开发一个更简单的HTML/CSS/JS网站。

网站上的许多页面都包含图像,其中包含许多数据,所以我想我将所有数据放在一起,包括所有数据,包括指向图像的链接并生成页面上的图像列表。我遇到的问题是尝试获取JSON文件时的JavaScript交叉原点请求。

我已经环顾了解决方案,其中大多数建议旋转服务器 - asp.net或node.js以获取JSON。几个问题:

  • 如果我可以编写引用图像文件的html,为什么我不能从javascript中获取JSON?我这里缺少我缺少的基本理解吗?
  • 还有其他方法可以使用JSON而不旋转Web服务器吗?我应该尝试将其嵌入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/

谢谢堆!

您试图用提供的代码实现的目标有几个问题。

首先,您正在尝试向未在 http 服务器上托管的资源提出AJAX请求。Ajax是 XMLHTTPREQUEST 的包装器,旨在使用HTTP协议获取资源。但是,它可以支持其他协议,例如文件和ftp。

第二,CORS不受浏览器的控制,它由 http 服务器控制。跨域来源请求可以工作,但是只有当您请求的资源使用HTTP标头响应的资源允许您的域访问它。由于您要求的资源与 http >>>>>

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

因此,如果没有HTTP服务器!@??是,否。否,因为您通常无法使用XMLHTTPREQUEST请求未通过HTTP服务器提供的资源。但是,您仍然可以通过其他方式请求资源。

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

相关内容

  • 没有找到相关文章