一文读懂JSONP原理

Leck1e 发布于2019-08-23 17:19 / 2035人阅读

摘要：端口，协议，域名，有一者不同就会出现跨域的问题。解决跨域的方式怎样解决跨域所谓的解决跨域问题就是前端在合适的时期动态添加一个标签，请求后端给的接口带上一个回调函数。因为标签不受浏览器同源策略的限制。

跨域

为什么会出现跨域？

因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。

端口，协议，域名，有一者不同就会出现跨域的问题。

解决跨域的方式

JSONP

CORS

JSONP怎样解决跨域？

所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个

2.在合适的阶段通过

后端

开启一个接口服务

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")
    
})

最终前端的代码

前端接收到的结果

JSONP原理就是这里简单

--end--

服务器托管私有云读懂sql 零基础读懂云计算 JSONP jsonp：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104162.html

前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

2json 2019-08-23 16:58 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

laznrbfe 2019-08-29 18:38 评论0 收藏0
一文读懂链路追踪

摘要：链路追踪链路追踪一词是在年提出的，当时谷歌发布了一篇论文，介绍了谷歌自研的分布式链路追踪的实现原理，还介绍了他们是怎么低成本实现对应用透明的。感兴趣的同学可以去深入了解一下链路追踪，希望本文对你有所帮助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

JerryWangSAP 2019-07-31 10:31 评论0 收藏0
一文读懂链路追踪

摘要：链路追踪链路追踪一词是在年提出的，当时谷歌发布了一篇论文，介绍了谷歌自研的分布式链路追踪的实现原理，还介绍了他们是怎么低成本实现对应用透明的。感兴趣的同学可以去深入了解一下链路追踪，希望本文对你有所帮助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

imtianx 2019-07-01 13:57 评论0 收藏0
一文读懂链路追踪

摘要：链路追踪链路追踪一词是在年提出的，当时谷歌发布了一篇论文，介绍了谷歌自研的分布式链路追踪的实现原理，还介绍了他们是怎么低成本实现对应用透明的。感兴趣的同学可以去深入了解一下链路追踪，希望本文对你有所帮助。 showImg(https://upload-images.jianshu.io/upload_images/13711841-f54b415cc8d07fdc?imageMogr2...

JerryZou 2019-08-16 17:58 评论0 收藏0