1、问题描述
(1)在从服务器访问信息的时候，突然报错，报错的信息为：
Access to XMLHttpRequest at ‘http://localhost:5500/get’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
(2)经查询，报错的原因是 访问跨域的问题；
2、代码展示
(1)写的服务器的代码如下，此时该服务器的名称为：‘server.js’；
const express = require('express');
const app = express();
app.get("/get", (req, res) => {
let r = { // 想要传递一个 json 数据；
id: 1,
name: 'zs'
};
let data = JSON.stringify(r); // 服务器给浏览器的一般都是字符串，因此需要先将其转成 json 字符串；
res.writeHead(200, { // 可以用 writeHead(响应头) 设置当前的状态码为：200(成功)； 并将传递的内容类型发过去(如： 'Content-type': 'application/json' 表示传递内容的是 json 字符串)；
'Content-type': 'application/json'
})
res.write(data); // 此时的显示结果为：'{"id":1,"name":"zs"}'，就是想要传递的 json 数据； (即：成功)；
res.end();
});
app.listen(5500, () => {
console.log('服务器正在启动...');
})
注意：此时肯定通过 npm init -y 创建 package.json 配置文件了； 当然也下载了 npm i express 的框架了，然后才能运行上述服务器代码；
(2)写的客户端页面的代码如下，此时该页面的名称为：‘1.html’；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var btn = document.querySelector('#btn');
btn.addEventListener('click', function () {
// 通过 ajax 向服务器发送请求来获取信息(用 cors 来解决跨域的问题)；
let xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "http://localhost:5500/get", true) // a=1&b=2
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
});
</script>
</body>
</html>
(3)在终端运行，运行结果如下：
注意：此时只要将 json 数据显示出来，就说明解决了跨域的问题；
4、小结：
哪里有不对或不合适的地方，还请大佬们多多指点和交流！