发出一个简单的 Ajax 请求
Posted
技术标签:
【中文标题】发出一个简单的 Ajax 请求【英文标题】：Making a simple Ajax request 【发布时间】：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的文件权限，如下所示。 【参考方案1】：检查文件和文件夹权限。此外，您有时需要在 htaccess 中添加“txt”扩展名，该扩展名位于 Web 浏览器可以执行的允许扩展名行上。
某些安装可能在 htaccess 中有这个，您可能需要修改：
IndexIgnore *.zip *.txt
此外，有时，如果关闭文件导航，它会禁用 file:/// 协议。检查：
Options -Indexes
此外，设置标头可能会使浏览器更好地处理请求， 所以，就在 xhr.open() 行之后：
xhr.setRequestHeader("Content-type", "text/plain");
【讨论】：
以上是关于发出一个简单的 Ajax 请求的主要内容，如果未能解决你的问题，请参考以下文章
javascript 简单的vanilla JavaScript函数来发出AJAX请求。演示：http：//jsfiddle.net/jsL14orc/9/embedded/result/