9. 跨域之JSONP

浏览器的同源策略,请求页面和请求的资源页面

• 协议相同
• 端口号相同
• 主机名相同
• 完全相同

否则浏览器不允许使用非同源的数据

jsonp跨域原理

1. 浏览器生成一个script元素,访问数据接口
2. 服务器相应一段JS代码,调用某个函数,并把相应的数据传入
3. script标签是允许跨域请求资源的

服务器端修改

router.get('/', (req, res, next) => {
    const { pageNum = 1, pageSize = 10 } = req.query;
    StudentServices.findAndCountAll(Number(pageNum), Number(pageSize)).then(resp => {
        res.send(getResult(resp));
        const jsonpContent = JSON.stringify(resp);
        const jsonpScript = `callback(${jsonpContent})`;
        res.header('content-type', 'application/javascript').send(jsonpScript)
    }).catch(err => next(err));
})

• 把返回数据修改为字符串
• 拼装一段js代码字符串
• 返回给浏览器,并告诉浏览器返回的数据content-type是application/javscript类型,浏览器会接受到,并根据返回的类型,知道返回的是一段js代码

客户端修改

在浏览器端,服务器相应了一段的可执行的代码callback(${jsonpContent}),此段代码.执行了一个名字叫callback的函数,并把数据传递了进去,

因此只需要在客户端,声明一个callback函数,并并且接受参数就可以了

function callback(data){
  conosle.log(data);// data就是服务器返回的数据
}

总结: 可以把回调函数当做参数,传递给后端作为返回代码的函数名字使用

客户端实例代码

function jsonp(url){
const script=document.createElement('script');
  script.src=url;
  document.body.appenChild(script);
  script.onload=function (){
  script.remove();
  }
}
function callback(data){
console.log(data);
}
jsonp('http://xxxxx/api/list')

jsonp的缺点

1. 修改api的请求方式,导致服务器在处理不是jsonp和jsonp的时候,做多次处理
2. 服务器相应的是可执行的代码,浏览器并不知道内容是什么,具有一定的安全隐患
3. jsonp由于采用了sctipt的src来做请求的机制,所以只能使用get请求,不能使用post请求