JSONP解决前端跨域学习案例

最新推荐文章于 2024-08-15 18:19:19 发布

xuxuejian9824

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量287

点赞数 2

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_42576837/article/details/141199364

版权

JSONP 的工作原理

JSONP利用的是

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <button id="sendRequest">Send JSONP Request</button>
    <p id="response"></p>

    <script>
//梳理一下逻辑。jsonp方案只能支持get请求，我们需要请求的是http://localhost:4000/data数据，请求到数据以后我们会对数据做一些操作，这个操作函数为handleResponse(data),
//script.src=‘http://localhost:4000/data?callback=handleResponse’,把函数名称作为参数拼接一起作为请求参数传递到了服务器，服务器是可以解析到handleResponse函数名的
        function handleResponse(data) {
            document.getElementById('response').innerText = JSON.stringify(data);
        }
        
        document.getElementById('sendRequest').addEventListener('click', () => {
            const script = document.createElement('script');
            script.src = 'http://localhost:4000/data?callback=handleResponse';
            document.body.appendChild(script);
        });
    </script>
</body>
</html>

后端代码：

const express = require('express');
const app = express();
const port = 4000;

app.get('/data', (req, res) => {
//服务器尝试获取携带的参数键值对，即函数名称
    const callback = req.query.callback;
    //data是服务器端的数据，就是我们通过script.src请求的数据
    const data = { message: 'This is data from the server via JSONP' };

//如果确实携带了参数，我们把函数名 和 数据 拼成函数调用的形式，
//比如这里是 handleResponse(data)
//就是handleResponse({ message: 'This is data from the server via JSONP' })形式，发送到浏览器
    if (callback) {
        // 返回JSONP格式的数据
        res.send(`${callback}(${JSON.stringify(data)})`);
    } else {
        res.json(data);
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

点击按钮以后可以获取到数据
在这里插入图片描述
查看网络请求

在这里插入图片描述

浏览器收到handleResponse({ message: 'This is data from the server via JSONP' })代码之后，将其视为普通的JavaScript代码，并立即执行。由于浏览器端的脚本中已经事先定义好了handleResponse()函数，所以并不会报错，而是直接执行。

为什么浏览器会将返回的内容视为普通的JavaScript代码执行

浏览器将返回的内容视为普通的JavaScript代码执行是因为JSONP利用了<script>标签的特性。

<script>标签的特性
<script>标签是HTML文档中用来加载和执行JavaScript代码的元素。无论脚本的来源是同域还是跨域，浏览器都会加载并执行它。

当<script>标签的src属性指向一个外部资源时，浏览器会向该URL发送一个GET请求，并将返回的内容作为JavaScript代码执行。

如果是img的src属性来做跨域呢

<img>标签的src属性通常用于指定图片资源的URL。浏览器会向这个URL发送一个HTTP GET请求，并将响应的内容作为图像数据进行渲染。

与<script>标签不同，标签不会执行服务器返回的任何JavaScript代码。它只会将返回的内容当作图像数据来处理。如果服务器返回的不是图像数据，而是文本或其他类型的内容，浏览器通常会显示一个破损的图像图标（如果返回的内容是无法解析的）。

因此，<img>标签无法像<script>标签那样实现跨域执行代码的功能。

xuxuejian9824

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JSONP解决前端跨域学习案例

如果服务器返回的不是图像数据，而是文本或其他类型的内容，浏览器通常会显示一个破损的图像图标（如果返回的内容是无法解析的）。浏览器会向这个URL发送一个HTTP GET请求，并将响应的内容作为图像数据进行渲染。代码之后，将其视为普通的JavaScript代码，并立即执行。属性指向一个外部资源时，浏览器会向该URL发送一个GET请求，并将返回的内容作为。浏览器将返回的内容视为普通的JavaScript代码执行是因为JSONP利用了。无论脚本的来源是同域还是跨域，浏览器都会加载并执行它。
复制链接

扫一扫