vscode搭建本地服务器，使用ajax获取本地数据

直接使用ajax请求本地数据报错

直接使用XMLHttpRequest对象请求会有同源策略的问题。
同源是什么？

1. 协议相同：http
2. 域名相同：www
3. 端口号相同：8080默认端口
   如果请求资源的地址与对象所在的地址不同源，则请求失败。

        function getAjaxDate() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "a.txt", false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let date = xhr.responseText;
                    document.body.innerHTML = date;
                }
            }
            xhr.send();
        }
        getAjaxDate();

上面的代码直接运行在浏览器会报以下错误：

因为当前文件的地址是：

我们请求时应该使用http协议访问的，此时是file协议，协议不同所以不同源，不能访问获取。
因为现在只涉及到前端没有后台的支持，只能获取本地数据模拟从后台获取数据。解决这个问题，让文件在本地服务上运行即可访问本地数据。

安装Debugger for Chrome插件

打开VSCode，在扩展中搜索安装插件。

安装live-server

win+R，进入cmd。
第一步：npm install -g live-server
第二步：live-server 启动
想让哪个文件运行在服务器就到哪个文件下输入第二个命令即可。

解决禁止执行脚本问题

随便新建一个html文件，使用ajax获取本地数据。
ctrl+J调出终端面板，输入live-server命令，使得文件运行在服务器上。

a.txt与我的html文件在同一目录下：

        function getAjaxDate() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "a.txt", false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let date = xhr.responseText;
                    document.body.innerHTML = date;
                }
            }
            xhr.send();
        }
        getAjaxDate();

运行时报错，系统禁止执行脚本。
这是 powershell 的问题。

1. 使用管理员打开 powershell
2. 输入命令：set-executionpolicy remotesigned
3. 提示输入 Y、N、S(挂起)，输入 y 即可。
   
   
   全部完成之后，再次打开html的终端输入live-server命令，直接在浏览器中打开，会出现以下页面：
   
   点开ajax.html文件，获取到了a.txt中的内容。表示访问成功
   
   之前在看Ajax基础知识时就遇到这些问题，当时没有解决，今天把它解决掉了。