用 cors 解决：Access to XMLHttpRequest at ‘http://localhost:5500/get‘ from blocked by CORS policy 等的跨域问题

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、代码展示：

其一、写的服务器的代码如下，此时该服务器的名称为：‘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 的框架了，然后才能运行上述服务器代码；

其二、写的客户端页面的代码如下，此时该页面的名称为：‘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=2xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}}});</script>
</body></html>

其三、在终端运行，运行结果如下：

A、访问 server.js 这个服务器，展示结果为： (此时只要在控制台不报错，就没有问题)

B、用 ‘Live Server’ 打开客户端页面；

C、点击 ‘按钮’ 后的报错结果显示为：

3、解决办法：

通过在服务器开启跨域资源共享 (cors) 来解决跨域的问题：

其一、服务器端的代码修改为如下所示；

const express = require('express');
const app = express();app.all("*", function (req, res) {   //此时的 '*' 指用来处理所有的请求，从而在服务器端解决跨域的问题；res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');   //此时表示：允许 'http://127.0.0.1:5500' 地址来访问服务器；   res.header('Access-Control-Allow-Methods', 'GET,POST,PUT');           //此时表示：允许发的请求方式，如：'GET,POST,PUT';res.header('Access-Control-Allow-Headers', 'Content-Type');           //此时表示：允许发的请求头，如：'Content-Type' 请求头的类型;req.next();   //请求回来，并进行下一步的操作；
});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('服务器正在启动...');
})

注意：该操作仅在服务器端进行修改，不需要修改在客户端的代码；

其二、此时将 server.js 这个服务器重新运行，用 ‘Live Server’ 打开客户端页面并点击 ‘按钮’ 后，控制台的显示结果为：

注意：此时只要将 json 数据显示出来，就说明解决了跨域的问题；

4、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！

其二、如果关于解决异步跨域问题的方式 cors 与 jsonp 该文章不详细，请参考如下地址文章：https://blog.csdn.net/weixin_43405300/article/details/121824577?spm=1001.2014.3001.5501