JSONP实现跨域（非同源策略请求）

最新推荐文章于 2022-05-16 20:04:31 发布

小静冲冲冲

最新推荐文章于 2022-05-16 20:04:31 发布

阅读量3.1k

点赞数 1

分类专栏： JSONP 文章标签： ajax jsonp javascript

本文链接：https://blog.csdn.net/weixin_46105448/article/details/114687246

版权

JSONP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

昨天晚上在B站看了关于跨域的半节课，为什么是半节呢，因为就看到讲完jsonp实现跨域，再往后的方法我觉得我可能就看不懂了，所以先掌握这些啦，那么现在来总结一下昨天的收获：

什么是跨域呢？

在真实项目中，前端服务器往往被拆分为web服务器、data服务器、图片服务器……等等。web服务器用来给存储静态资源，即展示给用户的页面，而data服务器则会负责网站的业务逻辑和数据分析等工作，这两个服务器往往会有不同的域名或者端口，那么如何将后端业务逻辑和数据请求到前端页面中呢？这时候就需要“跨域”来帮助了。

跨域又叫非同源策略请求，当两个地址协议、域名、端口号都相同时，叫做同源，这三者任何一个不同时，都叫做非同源，也就是跨域。另外，我们在自己的网站中调用第三方开源的数据接口也是跨域。

JSONP方法实现跨域

关于script标签

我们在html文件中使用script标签引用外部js文件时，需要用到script标签的src属性，例如使用jQuery时，我们可以引入一个外部的jQuery地址，这个地址和本地的网页是非同源的，之所以会引用成功，就是因为script标签不存在跨域请求的限制。同样不受跨域请求限制的标签还有img、link、iframe等。

关于jQuery

jQuery中提供了JSONP的处理方式，引入jQuery即可使用同源策略的Ajax实现非同源策略请求。

JSONP实现跨域的原理及步骤

利用了script标签的src属性没有跨域请求限制这一点，通过它向服务器端发送请求，同时把本地的一个回调函数传给服务器。
服务器接收客户端的请求，准备好json格式的数据，就给客户端返回数据（以字符串的形式返回）。
客户端把接收回来的字符串变成js表达式，以全局函数的方式来执行，即可得到传回的数据。

简单实现一下

1、html中引入jQuery和用来发送请求的js文件：

    <!-- 1_jsonp.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>跨域</title>
    </head>
    <body>
        <!-- 引入jquery -->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="./1_jsonp.js"></script>
    </body>
    </html>

2、利用jsonp方法请求数据

    // 1_jsonp.js
    // jQuery内部封装的jsonp的请求数据的方法
    $.ajax({
        // 要请求的接口地址和数据
        url: 'http://127.0.0.1:8001/list',
        // 请求方式--默认为get
        method: 'get',
        // *执行JSONP请求
        dataType: 'jsonp',
        // 成功打印res
        success: res => {
            console.log(res);
        }
    });

3、搭建简单后台接收请求发送数据

    // serverJSONP.js
    // 基于node.js和express搭建jsonp的后台服务
    let express = require('express'),
        app = express();
    // 监听8001端口并且创建服务
    // _ => {} 不传参时下划线占位
    app.listen(8001, _ => {
        console.log('OK!');
    });
    // 服务器接收/list请求并做出响应
    app.get('/list', (req, res) => {
        // req对象中存储客户端发送请求的信息
        // req.query中储存所有‘?’问号传参的信息
        // 解构赋值的方法传给callback函数，并且穿一个默认值Function.prototype（匿名空函数）（解构赋值还不了解）
        let {
            callback = Function.prototype
        } = req.query;
        // 给客户端返回的数据
        let data = {
            code: 0,
            message: '小静'
        };
        // res响应对象中的send方法给客户端返回数据
        res.send(`${callback}(${JSON.stringify(data)})`);
    });

4、结果演示

服务器做出响应
控制台输出请求的数据

小结和感想：

终于我也能对跨域说上来点东西了，学习知识真让人开心。最近寝室的同学都在准备考研了，而我1号那天鬼使神差投了字节的实习内推，竟然还过了简历评估，准备了一个星期去面试结果还是一塌糊涂，从此在考研还是工作的路口坚定选择了工作，立志今年要找个好的实习。又过了快一周的学习，发现自己前端的基础不牢固，网络了解甚少，算法和数据结构也得尽快补起来，可真难啊。

哦对了，昨天学跨域看的视频课程来源：https://www.bilibili.com/video/BV1SE411r7yk

小静冲冲冲

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
10
评论
JSONP实现跨域（非同源策略请求）

前言昨天晚上在B站看了关于跨域的半节课，为什么是半节呢，因为就看到讲完jsonp实现跨域，再往后的方法我觉得我可能就看不懂了，所以先掌握这些啦，那么现在来总结一下昨天的收获：什么是跨域呢？在真实项目中，前端服务器往往被拆分为web服务器、data服务器、图片服务器……等等。web服务器用来给存储静态资源，即展示给用户的页面，而data服务器则会负责网站的业务逻辑和数据分析等工作，这两个服务器往往会有不同的域名或者端口，那么如何将后端业务逻辑和数据请求到前端页面中呢？这时候就需要“跨域”来帮助了。跨域
复制链接

扫一扫