共计 1564 个字符，预计需要花费 4 分钟才能阅读完成。
跨域
为什么会出现跨域？
- 因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。
- 端口，协议，域名，有一者不同就会出现跨域的问题。
解决跨域的方式
- 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–
正文完
发表至： javascript
2019-05-07
