一文读懂JSONP原理

栏目: Json · 发布时间: 4年前

内容简介:为什么会出现跨域?所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个<script>标签,请求后端给的接口带上一个回调函数。因为<script>标签不受浏览器同源策略的限制。

跨域

为什么会出现跨域?

  • 因为浏览器有同源策略的限制,同源策略是浏览器最核心最基础的安全策略。
  • 端口,协议,域名,有一者不同就会出现跨域的问题。

解决跨域的方式

  1. JSONP
  2. CORS

JSONP怎样解决跨域?

所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个<script>标签,请求后端给的接口带上一个回调函数。

因为<script>标签不受浏览器同源策略的限制。

手摸手带你解开JSONP的原理

实现JSONP跨域和JSONP原理的几步

**前端**
  1. 前端先定义一个回调函数
<script type="text/javascript" charset="utf-8">
    function callback(data){
        console.log(data)
    }
</script>
  1. 在合适的阶段通过<script>标签请求后端给出的地址带上callback回调参数
<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>

后端

  1. 开启一个接口服务
var express = require('express');

var app = express();

app.get('/',function(req,res,next){
    res.end("ok")
})

app.listen(3000,function(){
    
    console.log('JSONP')
    
})
  1. 等前端请求接口的时候,获取请求的参数的回调
app.get('/',function(req,res,next){
    
    var callback = req.query.callback;
    
})
  1. 最后后端把所需的数据放到获取到的回调函数参数内,返回给前端(返回的是字符串),浏览器会把它解析为js执行
app.get('/',function(req,res,next){
    
    var callback = req.query.callback;
    //模拟所需的数据
    var data = {
                err_ok:0,
                message:"请求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

最终后端代码

var express = require('express');

var app = express();

app.get('/',function(req,res,next){
    
    var callback = req.query.callback;
    //模拟所需的数据
    var data = {
                err_ok:0,
                message:"请求成功",
                data:{
                    name:"july",
                    age:21
                }
            }
                
    res.end(`${callback}(${JSON.stringify(data)})`)
    
})

app.listen(3000,function(){
    
    console.log('JSONP')
    
})

最终前端的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
            function callback(data){
                console.log(data)
            }
        </script>
        <script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

前端接收到的结果

一文读懂JSONP原理

JSONP原理就是这里简单

--end--


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ruby on Rails实践之路

Ruby on Rails实践之路

沃哈 / 科学 / 2010-5 / 48.00元

《Ruby on Rails实践之路:写给PHP和Java开发者的书》内容简介:Ruby on Rails是基于MVC模式的Web框架,用于开发基于数据库的Web应用。Ruby on Rails中内含了所需的Web服务器WEBrick。该框架配置的数据库除了缺省的MySQL外,还可以是Oracle、SQL Server等其他数据库。《Ruby on Rails实践之路:写给PHP和Java开发者的......一起来看看 《Ruby on Rails实践之路》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具