发出一个简单的 Ajax 请求答案

【问题标题】：Making a simple Ajax request发出一个简单的 Ajax 请求
【发布时间】：2020-01-28 11:38:01
【问题描述】：

我正在尝试使用 Lampp 服务器从我的本地计算机进行 Ajax 调用，但它一直出现此错误。

CORS 策略已阻止从源“null”访问“file:///opt/lampp/htdocs/AjaxProject/sample.txt”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、数据，铬，铬扩展，https。 loadText@trying.html:27

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajak tutorials</title>

</head>
<body>
    <button id="button">Change text</button>
    <p id="text">Let Ajax change this </p>
    <script>
    document.getElementById('button').addEventListener('click',loadText);
    function loadText()
    {
        var xhr=new XMLHttpRequest();
        xhr.open('GET','sample.txt',true);
        xhr.onload=function(){
            if(this.status==200){
                document.getElementById('text').innerHTML=this.responseText;
            }else if(this.status==404){
                document.getElementById('text').innerHTML="Not found";
            }

        }

        xhr.send();
    }
    </script>
</body>
</html>

【问题讨论】：

你是如何运行这个javascript的，即它在什么文件中，你是从本地运行的http服务器访问它还是只是在你的硬盘上打开一个文件？你得到的错误描述了问题，看看en.wikipedia.org/wiki/Same-origin_policy你可能还想在firefox中试试这个文件，看看你是否得到同样的错误。
我正在从 Lampp 中的 htdocs 文件夹运行 javascript .....该文件夹包含我在上面粘贴的 html 文件和我想要异步加载的 sample.txt 文件
如果您将 html 文件和 sample.txt 复制到自己的文件夹并直接从磁盘打开 html 是否有效？另外请确认sample.txt的文件权限，如下所示。

标签： javascript ajax

【解决方案1】：

检查文件和文件夹权限。此外，您有时需要在 htaccess 中添加“txt”扩展名，该扩展名位于 Web 浏览器可以执行的允许扩展名行上。

某些安装可能在 htaccess 中有这个，您可能需要修改：

      IndexIgnore *.zip *.txt

此外，有时，如果关闭文件导航，它会禁用 file:/// 协议。检查：

        Options -Indexes

此外，设置标头可能会使浏览器更好地处理请求，所以，就在 xhr.open() 行之后：

                xhr.setRequestHeader("Content-type", "text/plain");

【讨论】：