javascript - 外部文件无法加载 'load' 函数

Question

我想在单击按钮时将外部文本文件 (demo.txt) 的内容加载到我的 div 中。

文本文件包含文本“演示文本”。

但是显示错误

XMLHttpRequest cannot load file:///C:/Users/Tom/Desktop/jQuery%20thenewboston/76.)%20Load%20function/demo.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

在我的浏览器控制台上。

$(document).ready(function(){
	$('#button_file').on('click',function(){
		$('#load_html').load('demo.txt');
	});
});

<button type="button" id="button_file">Load file</button>
		<br />
	    <div id="load_html" >
		</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我是 jquery 的初学者，如有任何疑问，请在下方评论。

Answer 1

您无法获取结果，因为远程站点没有 CORS已启用:如果您查看控制台，您会看到:

(Reason: CORS header 'Access-Control-Allow-Origin' missing).

---

您可以使用 anyorigin.com 之类的东西绕过 CORS ，即:

$.getJSON('http://anyorigin.com/get/?url=http%3A//thenewboston....&callback=?', function(data){
    $('#div-data').html(data.contents);
});

---

PS:如果是本地文件，请确保将其加载到与脚本相同的地址，(localhost, 127.0.0.1、192.168.1.1 等...)