同源策略请求:同源是浏览器的概念,指 协议,域名,端口号相同。 ajax(异步无刷新) / fetch
前后端分离导致跨域(非同源策略请求)
- 前端:web服务器,请求资源文件 , 资源服务器:图片,音视频
- 后端:数据服务器,处理业务逻辑和数据接口
一、jsonp
原理:基于script 标签 src属性 ,发送请求时,把本地函数作为回调函数传递给服务器,服务端接收并返回处理完成的数据,浏览器接收到响应数据,执行该函数。
前端:
<script>
// 全局函数func
function func(data){
// data-服务端返回的数据
consolr.log(JSON.parse(data));
}
</script>
//请求后台接口,将函数名作为参数传递给后台。 src不受同源策略的限制
<script src="http://api.qq.com/list?callback=func"></script>
服务器端:
//接收客户端的请求
callback = func
//准备数据
data = {
...}
//给客户端返回string类型的数据
'func('+JSON.stringify(data)+')'
缺点:jsonp只能处理get请求。url传递数据可能被劫持(拦截响应),导致数据不安全(可能携带木马程序)不安全;有缓存,大小限制。
jQuery提供(内部封装)了jsonp的处理方式
前端:
$.ajax({
method:'get',
url:'http://127.0.0.1:8001/list'
dataType:'jsonp',//添加dataType属性,值为jsonp则执行的是JSONP请求
success:res=>{
console.log(res);}
})
服务端:Node+express实现
let express = require('express');
let app = express();
app.listen(8000,()=>{
console.log("服务器启动...")}