ajax（XMLHttpRequest）加载不了本地的文件，Cross origin requests are only supported for protocol schemes: ...

最新推荐文章于 2023-09-26 16:13:52 发布

原创最新推荐文章于 2023-09-26 16:13:52 发布 · 1.5w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#file #scheme

html 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了在使用XMLHttpRequest加载本地文件时遇到的跨域问题，并提供了一种解决方案，即通过搭建本地服务器来避免CORS策略限制，确保数据能够被正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Access to XMLHttpRequest at 'file:///E:/test.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我原本是做一个flappy bird的，但到加载本地文件的时候，一直报上面的错，就又写了一个简单的ajax请求来看看是怎么回事，看图

目录结构：（够简单了吧，两个数据文件，只用了一个txt文件）

下面是index.html的内容，完全是抄菜鸟教程里的XMLHttpRequest的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>Page Title</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css"> -->
    <!-- <script src="main.js"></script> -->
</head>
<body>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <p>多次点击按钮，可以看到时间变化。</p>
    <div id="myDiv"></div>
    <script>
        function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/test.txt",true);
  xmlhttp.send();
}
    </script>
</body>
</html>

运行后，下面是错误提示。