跨域问题的产生：
因为浏览器有同源策略，只有在同域名，同端口，同协议的情况下才可以进行数据交互；有的时候，例如：在公司开发项目的时候，前端开发的服务器可能和后端服务器不是同一个，因为可能是通过gulp、webpack搭建的开发服务器，就需要解决跨域问题，再例如，在大公司数据服务器不只有一个，所以跨域问题也必然存在
一、jsonp解决跨域请求
jsonp是一种前后端结合的跨域方式，原理就是通过script标签的src属性来进行数据请求，src不受同源策略的影响，故而能请求到数据，需要注意的是，数据处理需要通过回调函数来进行，而本质上，我们把回调函数的名字告诉后端，后端将数据放入到回调函数里，所以说需要告知后端，回调函数是什么，这也就是为什么说jsonp是前后端结合的方式。
注意：一个script只能请求一次，多次请求应该去动态的创建script，回调函数也只能使用一次，所以也需要动态创建 ，使用完成后移除，避免污染全局空间
缺点：jsonp只能get请求
1、nodejs代码，配置路由（使用express模块）
//后端的任务，就是把数据放到前端的那个函数里并给它执行一下
//直接返回这个操作的js字符串，因为这个字符串会被script当成js代码来运行
app.get('/data', function (req, res) {
//前端回调函数的名字
let fn = req.query['callback'];
//注意，在content 后拼接一个空字符串，将获取的数据转义正常输出，否则有时候读取的数据格式为buffer数据类型
var content = fs.readFileSync('./datas/data.json')+'';
//返回给前端函数数据
res.send(fn+'('+content+')');
});
2、js代码，返回数据（函数中用到的是es6解构赋值参数）
Jsonp({
url:"http://localhost:3000/data",
success(results){
console.log(results)
}
})
function Jsonp({url,success}) {
//动态创建script标签
let $script = $("")
//随机函数名字
var random_name = 'random_fn_'+Date.now()
//创建的随机全局函数
window[random_name] = function(data){ success(data)
//处理完数据之后，将script删掉，函数delete掉
$script.remove()
delete window[random_name]
}
$script[0].src = url+'?callback='+random_name
$("body").append($script)
}
二、cors解决跨域请求
cors纯后端的解决方式,每次请求都会有一个origin信息被后端捕捉，后端可以通过设置对这个origin的域允许访问来解决跨域问题
1、nodejs代码
app.get("/data_cors",(req,res)=>{
//此次请求的源信息
var reqOrigin = req.header("origin");
//如果源信息存在，且源是运行访问的
if(reqOrigin !=undefined && reqOrigin.indexOf("http://localhost:9000") > -1){
//设置允许 http://localhost:3000 这个域响应
res.header("Access-Control-Allow-Origin", "http://localhost:9000");
//允许这个域访问
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//允许的请求方法
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
}
res.send('123')
})
2、js代码获取返回的数据
$.ajax({
url:"http://localhost:3000/data_cors",
success(results){
console.log(results)
}
})
三、服务端代理proxy解决跨域请求
因为服务器间的数据交互没有跨域限制，所以我们可以通过一个中间代理服务器来请求目标服务器的数据，也就是开发服务器发送请求到代理服务器，代理服务器再请求目标服务器，将数据返回给开发服务器
1、nodejs代码
//目标服务器接口 3000：
app.get("/data_proxy",(req,res)=>{
//此次请求的源信息
res.send('proxy')
})
2、代理服务器1234：
app.get("/to3000",(req,res)=>{
//代理服务器1234对9000做跨域处理
var reqOrigin = req.header("origin");
//如果源信息存在，且源是运行访问的
if(reqOrigin !=undefined && reqOrigin.indexOf("http://localhost:9000") > -1){
//设置允许 http://localhost:3000 这个域响应
res.header("Access-Control-Allow-Origin", "http://localhost:9000");
//允许这个域访问
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//允许的请求方法
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); }
//获取到9000真正要调用的3000目标服务器的接口
var url = req.query['url'] let _res = res
//代理服务器1234像目标服务器3000发送请求（没有跨域限制）
http.get(url,(res)=>{ let result='' res.on("data",(chunk)=>{
result+=chunk
})
res.on("end",()=>{ console.log(result)
//代理服务器1234将请求到的目标服务器3000的数据返回给开发服务器9000
_res.send(result)
})
})
})
app.listen(1234);
3、js代码，开发服务器9000：
//当前服务器9000向代理服务器1234发送请求
$.ajax({
url:"http://localhost:1234/to3000",
data:{
url:"http://localhost:3000/data_proxy"
},
success(results){
console.log(results)
}
})
网友评论