利用CORS解决跨域的问题
我们在做前后端分离项目的时候，前后端服务会放在不同的端口中，而前端想要获取后端的数据的话，就会存在跨域的问题。
解决方法：
服务端设置响应头
//比如你的前端服务在8080端口,那么就设置成
'Access-Control-Allow-Origin': 'http://localhost:8080'
//这样设置的意思是，允许8080的端口的服务来访问这个服务器的内容。
//相当于白名单
这样设置的意思是，允许8080的端口的服务来访问这个服务器的内容。相当于白名单
我们用Node.js的代码来模拟这种情况
模拟前端
页面代码——index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CORS跨域</title>
</head>
<body>
<div class="">我在8080端口，请求8081端口的数据</div>
</body>
<script type="text/javascript">
let xhr=new XMLHttpRequest()
xhr.open('get','http://localhost:8081');
xhr.send();
</script>
</html>
将这个页面发布到8080端口——server1.js
let http = require('http');
let fs = require('fs')
let server = http.createServer((req, res) => {
console.log("客户端已开启--8080端口")
// 读取HTML文件
let html = fs.readFileSync('./index.html', 'utf8')
res.writeHead(200, {
'Content-Type': 'text/html'
})
// 将读取到的HTML文件写入到响应流中
res.end(html)
}).listen(8080)
模拟后端
let http = require('http');
let server = http.createServer((req, res) => {
console.log("服务端已开启--8081端口")
res.end('这是8081端口返回的数据')
}).listen(8081)
开启前后端的服务
进入到这两个文件的路径，通过命令行开启
node server1.js //前端开在8080端口
node server2.js //后端开在8081端口
此时我们打开8080端口，打开控制台，汇报下图的错误：
跨域请求失败
解决方法
在服务器（8081端口）设置Header，允许从8080端口来的请求访问服务器的内容（尝试用白名单的思想来理解）
将server2.js改成以下的样子
let http = require('http');
let server = http.createServer((req, res) => {
console.log("服务端已开启--8081端口")
res.writeHead(200, {
'Content-Type': 'text/plain;charset=utf-8',//不加这个会返回乱码，因为下面返回的数据是中文
'Access-Control-Allow-Origin': 'http://localhost:8080'
})
res.end('这是8081端口返回的数据')
}).listen(8081)
重启服务，刷新页面。
我们打开浏览器的Network选项，可以看到请求成功，并且也有数据返回了。
请求成功
点开Preview 选项卡，可以看到返回的数据
返回的数据
至此，利用CORS解决了跨域的问题。
