内容简介：为什么会出现跨域？所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个<script>标签，请求后端给的接口带上一个回调函数。因为<script>标签不受浏览器同源策略的限制。
跨域
为什么会出现跨域？
- 因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。
- 端口，协议，域名，有一者不同就会出现跨域的问题。
解决跨域的方式
- JSONP
- CORS
JSONP怎样解决跨域？
所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个<script>标签，请求后端给的接口带上一个回调函数。
因为<script>标签不受浏览器同源策略的限制。
手摸手带你解开JSONP的原理
实现JSONP跨域和JSONP原理的几步
**前端**
- 前端先定义一个回调函数
<script type="text/javascript" charset="utf-8">
function callback(data){
console.log(data)
}
</script>
- 在合适的阶段通过<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')
})
- 等前端请求接口的时候，获取请求的参数的回调
app.get('/',function(req,res,next){
var callback = req.query.callback;
})
- 最后后端把所需的数据放到获取到的回调函数参数内，返回给前端（返回的是字符串），浏览器会把它解析为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--
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- java反射原理， 注解原理
- Webpack 原理（二）：加载原理
- Docker原理之 - CGroup实现原理
- 【Vue原理】响应式原理 - 白话版
- Docker实现原理之 - OverlayFS实现原理
- UAV MOF工作原理之Agent注入机制原理
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
Markdown 在线编辑器
Markdown 在线编辑器