jsonp的简单实现方式

最新推荐文章于 2024-02-01 08:30:00 发布

le45

最新推荐文章于 2024-02-01 08:30:00 发布

阅读量270

点赞数

分类专栏：跨域的解决方案文章标签： jsonp 跨域

本文链接：https://blog.csdn.net/qq_41805273/article/details/103076837

版权

跨域的解决方案专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jsonp是 json with padding 的缩写，他不属于ajax请求，却可以模拟ajax请求，这里简单写一个代码，用来展示jsonp简单的实现方式。
首先，先创建两个简单的服务器，来监听两个不同的端口，得以模仿跨域请求，代码如下：

//app1,这里用了express
const express=require("express");
const path=require("path")
const app=express();
app.use(express.static(path.join(__dirname,"public")))
app.listen(3000)

//app2,因为app2只是为了模拟一个跨域请求才创建的，所以就没有加静态路由
const express=require("express");
const path=require("path")
const app=express();
app.listen(3001)

这样服务器就搭建好了，接下来写客户端代码

<!--public下的jsonp.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(){
             console.log("fn被调用")
        }
    </script>
    <script src="http://localhost:3001/test"></script>
</body>
</html>

来解释一下这段代码，我们目的是访问localhost:3001/test用来模仿跨域访问，所以我们在app2中添加以下代码来响应请求：

app.get("/test",(req,res)=>{
    let fn="fn()";//返回函数名，来调用客户端函数
    res.send(fn)
})

执行，查看结果
执行结果
成功，于是我们也很容易就想到，如果给这个函数参数的话，服务器端的数据就可以通过参数传递到客户端，这就是一个简单的跨域请求了。
暂时就先这些，之后还会接着对此进行完善。

le45

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp的简单实现方式

jsonp是 json with padding 的缩写，他不属于ajax请求，却可以模拟ajax请求，这里简单写一个代码，用来展示jsonp简单的实现方式。首先，先创建两个简单的服务器，来监听两个不同的端口，得以模仿跨域请求，代码如下：//app1,这里用了expressconst express=require("express");const path=require("path")...
复制链接

扫一扫