JSONP实现跨域(非同源策略请求)

前言

昨天晚上在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文件:

    
    
    <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>
        
        <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、结果演示

JSONP实现跨域(非同源策略请求)_第1张图片
JSONP实现跨域(非同源策略请求)_第2张图片

小结和感想:

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

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

你可能感兴趣的:(JSONP,ajax,jsonp,javascript)