为什么这是跨域请求

why is this a cross domain request

我正在尝试制作一组​​能够发送给某人的文件,他们可以在本地网络浏览器中查看一些内容。我的代码在使用网络服务器 (apache) 查看时有效,但如果我将它作为文件加载(即 file:///C:/Code/Web/test/index.html),它会收到跨域请求加载 JSON 文件时我的 JavaScript 文件出错。 HTML、JS 和 JSON 文件都在同一个文件夹中。我不确定这是一个跨域请求,也不知道为什么 chrome 和 IE 无法加载 JSON 文件。 Firefox 加载它没有问题。

我用来加载文件的JS是:

const JSON_FILE = "tin.json";
var xmlhttp;

function webGLStart() 
{
    fetchDoc(JSON_FILE,loadJSON)
}

function fetchDoc(url,cfunc)
{
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
}

function loadJSON()
{
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        var input = JSON.parse(xmlhttp.responseText);
        displayData(input);
    }
}

我的 html 页面上什么也没有发生。它只是一个 canvas 主体在加载时调用 webGLStart 的地方。

有没有办法解决这个问题,或者这是 chrome 和 IE 不允许的东西?

它可以保护您免受以下形式的攻击:

  • 您收到一封电子邮件,其中包含 HTML 文档作为附件
  • 您双击附件并在默认浏览器中打开 HTML 文档
  • JavaScript 嵌入文档中访问您硬盘上的文件并将它们上传给攻击者

Chrome 和 IE 完全禁止访问文件方案 URI。 Firefox 允许他们 only if 主机 URI 位于目录中,该目录是包含目标 URI 的目录的祖先。


您已经确定了解决方法:在网络服务器上托管网络应用程序。

出于安全原因,浏览器必须限制与本地文件系统的交互。如果您想测试您的 ajax 请求,您可以设置轻型 http 服务器环境,例如 lighttpd、node.js npm package http-server 或使用其中一种开发解决方案,例如 Microsoft WebMatrix