跨域
为何会涌现跨域?
- 由于浏览器有同源战略的限定,同源战略是浏览器最中心最基本的安全战略。
- 端口,协定,域名,有一者差别就会涌现跨域的题目。
处理跨域的体式格局
- JSONP
- CORS
JSONP如何处理跨域?
所谓的JSONP处理跨域题目就是前端在适宜的时代动态增加一个<script>标签,要求后端给的接口带上一个回调函数。
由于<script>标签不受浏览器同源战略的限定。
手摸手带你解开JSONP的道理
完成JSONP跨域和JSONP道理的几步
**前端**
- 前端先定义一个回调函数
<script type="text/javascript" charset="utf-8">
function callback(data){
console.log(data)
}
</script>
2.在适宜的阶段经由过程<script>标签要求后端给出的地点带上callback回调参数
<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
后端
- 开启一个接口效劳
var express = require('express');
var app = express();
app.get('/',function(req,res,next){
res.end("ok")
})
app.listen(3000,function(){
console.log('JSONP')
})
2.等前端要求接口的时刻,猎取要求的参数的回调
app.get('/',function(req,res,next){
var callback = req.query.callback;
})
3.末了后端把所需的数据放到猎取到的回调函数参数内,返回给前端(返回的是字符串),浏览器会把它剖析为js实行
app.get('/',function(req,res,next){
var callback = req.query.callback;
//模仿所需的数据
var data = {
err_ok:0,
message:"要求胜利",
data:{
name:"july",
age:21
}
}
res.end(`${callback}(${JSON.stringify(data)})`)
})
终究后端代码
var express = require('express');
var app = express();
app.get('/',function(req,res,next){
var callback = req.query.callback;
//模仿所需的数据
var data = {
err_ok:0,
message:"要求胜利",
data:{
name:"july",
age:21
}
}
res.end(`${callback}(${JSON.stringify(data)})`)
})
app.listen(3000,function(){
console.log('JSONP')
})
终究前端的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" charset="utf-8">
function callback(data){
console.log(data)
}
</script>
<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
</body>
</html>
前端接收到的效果
JSONP道理就是这里简朴
–end–