从源“null”访问“file:///sample.txt”处的 XMLHttpRequest 被 CORS 策略阻止：仅协议方案支持 CORS

Question

从源“null”访问“file:///sample.txt”处的 XMLHttpRequest 被 CORS 策略阻止：仅协议方案支持 CORS

我是 AJAX 的新手，目前正在学习它的基础知识。在我点击提交按钮的 html 文件中，我只是想记录一个文本文件的文本，该文本文件位于 html 文件本身的同一目录中。但相反，我收到了一个错误

CORS 政策已阻止从源“null”访问“file:///D:/Front_end_files/AJAX/sample.txt”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、数据、chrome、chrome - 扩展，https。

这是我的 Ajax-1.html

<!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>Ajax-1 Text file</title>
</head>
<body>
        <button id="btn">Click Me</button>

        <script>
            document.getElementById('btn').addEventListener('click',loadtext);

            function loadtext(){

                let xhr = new XMLHttpRequest();
                console.log(xhr);

                xhr.open('GET', 'sample.txt', true);

                xhr.onload = function(){
                    if(this.status == 200){
                        console.log(this.responseText);
                    }
                };

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

Run Code Online (Sandbox Code Playgroud)

有人可以告诉我我在这里做错了什么，还是 chrome 和 firefox 的新功能？

Answer 1

Ale*_*ria 5

不鼓励这种行为，因为它会在您的计算机中造成安全漏洞，我们不希望能够对我们的文件执行 AJAX 请求，这会将我们的本地系统暴露给网络。

正如他们之前所说，CORS 不支持本地 file:// 访问，因此您必须找到一种解决方法，一个简单的方法是使用 python 提供简单的 HTTPServer 并在那里提供文件，例如:

python -m SimpleHTTPServer 8080

Run Code Online (Sandbox Code Playgroud)

这会将您当前的工作目录作为小型网络服务器提供服务。

归档时间：	6 年前
查看次数：	28128 次
最近记录：	6 年前