使用 JSONP 解决同源限制问题

最新推荐文章于 2023-05-11 19:08:54 发布

火星飞鸟

最新推荐文章于 2023-05-11 19:08:54 发布

阅读量290

点赞数 3

分类专栏：前后端交互网络相关同源政策文章标签：前端 node.js 同源限制

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109776302

版权

前后端交互同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

网络相关

6 篇文章 0 订阅

订阅专栏

同源政策

5 篇文章 0 订阅

订阅专栏

JSONP是JSON with Padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。

1. `JSONP` 跨域原理

浏览器的同源策略把跨域请求都禁止了
html的<script>标签，<img>标签，<iframe>标签，可以请求第三方的资源（不受同源策略影响）
由此可以用<script>标签引入jsonp文件，然后通过一系列JS操作获取数据

2. `JSONP` 实现跨域步骤

将不同源的服务器端请求地址写在<script>标签的src属性中

<script src="www.example.com"></script>

服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。

const data = 'fn({name: "张三", age: "20"})';
res.send(data);

在客户端全局作用域下定义函数fn()，在fn()函数内部对服务器端返回的数据进行处理

function fn(data) {
    console.log(data);
}

3. `JSONP` 跨域举例

客户端：
JSONP.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <script>
        function fn(data) {
            console.log('客户端的fn函数被调用了')
            console.log(data);
        }
    </script>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 为按钮添加点击事件
        btn.onclick = function() {
            // 创建script标签
            var script = document.createElement('script');
            // 设置src属性
            script.src = 'http://localhost:3001/better?callback=fn';
            // 将script标签追加到页面中
            document.body.appendChild(script);
            // 为script标签添加onload事件，加载完毕后会触发
            script.onload = function() {
                // 将body中的script标签删除掉
                document.body.removeChild(script);
            }
        }
    </script>
</body>

</html>

服务器端：app1.js(3000端口)、app2.js(3001端口)
其中app2.js的代码：

// 引入express框架
const express = require('express');
// 创建web服务器
const app = express();

app.get('/better', (req, res) => {
    // 接收客户端传递过来的函数的名称
    const fnName = req.query.callback;
    // 将函数名称对应的函数调用代码返回给客户端
    const result = fnName + '({name: "Jack"})';
    res.send(result);
});

// 监听3001端口
app.listen(3001);
// 控制台提示输出
console.log('服务器2启动成功');

实现步骤及效果：

启动app1.js、app2.js
浏览器地址栏输入：http://localhost:3000/JSONP.html
点击按钮

返回了客户端传来的数据，实现了跨域。

此案例进行了JSONP的代码优化：

客户端需要将函数名称传递到服务器端。这样客户端改函数名称的时候，服务器端无需更改函数名称。
将<script>请求的发送变成动态请求。点击按钮需要请求时，才动态添加<script>标签，接收到数据之后就把<script>标签删除。避免了多次请求出现<script>标签冗余的情况。

进一步优化：
使用res.jsonp()方法，即可完成服务器端的所有功能。
app2.js：

// 引入express框架
const express = require('express');
// 创建web服务器
const app = express();

app.get('/better', (req, res) => {
    // 接收客户端传递过来的函数的名称
    // const fnName = req.query.callback;
    // 将函数名称对应的函数调用代码返回给客户端
    // const result = fnName + '({name: "Jack"})';
    // res.send(result);

    // jsonp接受客户端传递的参数，将其转化为字符串，再拼接起来
    res.jsonp({ name: 'Jack', age: 20 });
});

// 监听端口
app.listen(3001);
// 控制台提示输出
console.log('服务器2启动成功');

在这里插入图片描述
完成了同样的跨域效果，客户端改函数名称的时候，服务器端也无需更改函数名称。

火星飞鸟

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用 JSONP 解决同源限制问题

JSONP是JSON with Padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。1. JSONP 跨域原理浏览器的同源策略把跨域请求都禁止了html的<script>标签，<img>标签，<iframe>标签，可以请求第三方的资源（不受同源策略影响）由此可以用<script>标签引入jsonp文件，然后通过一系列JS操作获取数据2. JSONP 实现跨域步骤将不同源的服务器端请求地址写在<script>标签的
复制链接

扫一扫