博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JSONP跨域请求学习
阅读量:5891 次
发布时间:2019-06-19

本文共 1769 字,大约阅读时间需要 5 分钟。

对于JSONP一直是知半解,今天利用周末整理了一下

维基百科的解释:

JSONP (JSON with Padding or JSON-P[1]) is a javascript pattern to request data by loading a <script> tag. It was proposed by Bob Ippolito in 2005.[2] JSONP enables sharing of data bypassing same-origin policy. The policy disallows running JavaScript to read media DOM elements or XHR data fetched from outside the page's origin. The aggregation of the site's scheme, port number and host name identifies as its origin.
我的理解是1、前端编写自己的函数,用script标签发送get请求把函数名字带上
2、服务器端接送到请求后获取前端发送请求时的query,添加上自己的数据返回后。
3.、前端获取返回的内容其实就自己的函数调用实参是数据对象。
  • 解释的有点懵逼没关系,用栗子说话。

前端代码

    Document

后端代码

//用node编写一个简单的服务器const http = require('http');const urlModule = require('url');const server = http.createServer();server.on('request', function (req, res) {    //urlModule.parse(req.url.url)的请求 就是这个对象    // {    //   protocol: null,    //   slashes: null,    //   auth: null,    //   host: null,    //   port: null,    //   hostname: null,    //   hash: null,    //   search: '?callback=getremotedata',    //   query: 'callback=getremotedata',    //   pathname: '/',    //   path: '/?callback=getremotedata',    //   href: '/?callback=getremotedata' }    // 对象结构赋值得到query是一个对象    const {pathname: url, query} = urlModule.parse(req.url, true)    if (url === '/') {        var data = {            name: '大毛',            age: 18,            gender: '未知'        };        // 解析query的请求得到前端发送的函数名称,加上括号调用此函数,函数里加实参servedata返回        var scripteStr = `${query.callback}(${JSON.stringify(data)})`        console.log(scripteStr)        res.end(scripteStr)    } else {        res.end('404')    }});server.listen('3999', function () {    console.log('server is running 3999')})
  • 这样前端发送请求,无论回调是什么,后端都会返回回调加data数据,就实现了跨域请求啦。

第一写感觉有点语言不清,大家把代码自己敲一遍就懂了

自学前端3个月,想找一个基础的前端工作

转载地址:http://wlfsx.baihongyu.com/

你可能感兴趣的文章
nginx win 启动关闭_windows下nginx启动与关闭的批处理脚本
查看>>
minio 并发数_MinIO 参数解析与限制
查看>>
eap wifi 证书_用openssl为EAP-TLS生成证书(CA证书,服务器证书,用户证书)
查看>>
mysql 应用程序是哪个文件夹_Mysql 数据库文件存储在哪个目录?
查看>>
mysql半同步和无损复制_MySQL半同步复制你可能没有注意的点
查看>>
mysql能看见表显示表不存在_遇到mysql数据表不存在的问题
查看>>
使用mysql实现宿舍管理_JSP+Struts2+JDBC+Mysql实现的校园宿舍管理系统
查看>>
mysql alter 修改字段类型_MySQL ALTER命令:删除,添加或修改表字段、修改字段类型及名称等...
查看>>
mysql中的事务和锁_MySQL - 事务和锁中的互斥?
查看>>
mysql statement讲解_Statement接口详解
查看>>
mysql_print_default_知识点:MySQL常用工具介绍(十 二)——实用程序my_print_defaults、perror...
查看>>
mysql怎么会报错_MySQL启动报错怎么办?
查看>>
python编译exe用于别的电脑上_Python安装教程(推荐一款不错的Python编辑器)
查看>>
flash back mysql_mysqlbinlog flashback 使用最佳实践
查看>>
hive中如何把13位转化为时间_sqoop1 导入 hive parquet 表中 时间戳调整为日期
查看>>
mysql书外键_[转] mysql 外键(Foreign Key)的详解和实例
查看>>
mysql存储引擎模式_MySQL存储引擎
查看>>
python入门小游戏代码_【Python】Python代码实现“FlappyBird”小游戏
查看>>
云服务器怎么卸载mysql数据库_mysql 删除数据库脚本
查看>>
mysql 5.5.57互为主从_MYSQL 5.5.18 互为主从配置成功
查看>>