废话开篇：什么是跨域：当前服务器路径下的页面请求其他服务器数据时会报跨域错误，解决这样的问题可以将跨域的请求转移给一个不限制请求访问的环境（这里就是 node 环境），也就是在跨域请求页面环境开启一个 node 服务，那么，再访问这个服务的接口就不会有跨域问题，当前的 node 环境再真正的请求真实服务器地址，获取真实数据后进行同步返回，这样跨域问题就通过代理的方式解决了。下面通过简单的代码来模拟一下跨域解决方案。
一、情景讲述
利用 node 本地开启两个服务，一个 8080 端口（模拟代理服务器），一个 8081 端口（模拟正式服务器），在代理服务器里面新建一个页面，编写 JS 网络请求代码，去请求正式服务器接口数据，此时，就会出现跨域问题。
跨域访问： 8080 服务页面请求 8081 服务接口数据。
代理访问：8080 服务页面请求 8080 服务接口数据，接受到数据请求后 8080 服务再请求 8081 接口服务数据并返回。
这里可以看到返回了 8081 服务器的接口数据。
二、实现步骤
新建两个文件，用来模拟两个本地服务。
终端下分别对两个文件夹执行 npm init 初始化操作。
WSLProxy8080 文件夹里内容展示
www：文件里存放前端 index.html 代码
（1）代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
</style>
<body style="text-align: center;margin-top: 130px;">
<div>我是8080页面</div>
<button id="request">点击发送请求</button>
</body>
<script type="text/javascript">
document.querySelector('#request').onclick = function () {
var ajaxObj = new XMLHttpRequest();
ajaxObj.open('get', 'http://10.10.60.20:8080/api/login');
ajaxObj.send();
ajaxObj.onreadystatechange = function () {
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
console.log('数据返回成功');
console.log(ajaxObj.responseText);
}
}
}
</script>
</html>
代码比较简单，仅仅是做了一个 GET 请求，请求地址是 8080 下的接口地址。
index.js ：node 启动文件，此文件主要功能是开启 node 服务。
需要安装的依赖库有：
（1）express：开启本地 node 服务。
（2）request：数据请求模块。在接受到前端同域页面 XMLHttpRequest 请求后将请求内容转向 8081 服务请求。
（3）代码
let express = require('express')
let app = express()
let request = require('request');
//拦截器
app.all('/api/*',(req, res, next)=>{
next()
})
//网页
app.use(express.static('www'))
//接口
app.use('/api/login', (req,res) => {
if(req.method == 'GET'){
//重新转发请求到8081（模拟正式服务器）
request.get({'url':'http://10.10.60.20:8081/api/login'},(err,httpResponse, body)=>{
if(err){
res.send({'message':'未知错误'})
} else {
//解析数据
var data = eval('(' + body + ')');
//返回结果
res.send(data)
}
})
}
});
//监听 8080 端口
app.listen(8080,()=>{
})
（4）开启服务：终端进入当前文件，在命令行内输入 node ./index.js 开启服务。
到此，同域前端请求就避免了跨域问题出现，并且服务器收到请求后进行了转发，当接收到真正的请求数据后紧接着把数据返回给了前端
WSLProxy8081 文件里 index.js
（1）代码
let express = require('express')
let app = express()
let request = require('request');
app.all('/api/*',(req, res, next)=>{
next()
})
app.use('/api/login', (req,res) => {
res.send({'message':'代理转发'})
});
app.listen(8081,()=>{
})
代码很简单，这里就是返回了一条消息。
三、思考总结
文章的出发点就是理解跨域问题的解决思路。所以，请忽略代码质量问题[抱拳][抱拳][抱拳]，有些时候在用某些高度集成的第三方很大程度上都是在模拟前人的配置而忽略了其操作背后的意义，所以，带着一些有针对性的疑问用简单的逻辑来表达出来，对自身的理解有很大帮助。文章内容为分享心得，欢迎各位讨论及希望大神指正。
