内容简介：为什么会出现跨域？所谓的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--
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
高性能网站建设指南
Steve Souders / 刘彦博 / 电子工业出版社 / 2008年 / 35.00元
本书结合Web 2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征，阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术，全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。《高性能......一起来看看 《高性能网站建设指南》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
RGB HSV 转换
RGB HSV 互转工具