jsonp 解决同源限制 跨域 原理解析 函数封装

最新推荐文章于 2021-12-15 14:54:08 发布
最新推荐文章于 2021-12-15 14:54:08 发布
阅读量109 收藏
点赞数
分类专栏： JavaScript node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/107610884
版权

文章目录

概念

jsonp（json with padding）,它不属于Ajax请求，但它可以模拟Ajax请求
将json数据当做填充内容

原理

  1. 将不同源的服务端请求地址写在script标签的src属性当中
// 通过script向不同源的服务端发送请求
<script src="www.example.com"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  1. 服务端响应数据必须是一个函数的调用，真正要发送给客户的数据需要作为函数调用的参数。
const data = 'fun({name:"张三",age:"20"})'
res.send(data)
  1. 在客户端全局作用域定义函数fun 要在script之前
fun(data){}
  1. 在函数fun内部进行服务端返回的数据进行处理
fun(data){
	console.log(data)
	// 数据的处理
}

原理示例

开启2个服务器 s1 s2
s2 app.js

const express = require("express")
const path = require("path")
const app = express()

// 开启静态资源访问
app.use(express.static(path.join(__dirname,'public')))

app.get("/test",(req, res)=>{
    let obj = {
        name:"张三",
        age:18
    }
    res.send(`fun(${JSON.stringify(obj)})`)
})

app.listen(3001,()=>{
    console.log("s2 服务器启动")
})

s1 app.js

const express = require("express")
const path = require("path")
const app = express()

// 开启静态资源访问
app.use(express.static(path.join(__dirname,'public')))

app.listen(3000,()=>{
    console.log("s1 服务器启动")
})

s1 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>s1 html</title>
</head>
<body>
    请求 http://localhost:3001/test 
    <script>
        // 定义全局函数
        function fun(data){
            // let dat = JSON.parse(data)
            console.log("dat",data)
        }
    </script>
    <!-- 将非同源服务器端的请求地址写在script标签的src -->
    <script src="http://localhost:3001/test"></script>
</body>
</html>

效果
在这里插入图片描述

优化示例

  1. 客户端要将函数名称传递到服务端
  2. 将 script 请求发送变成动态请求（动态添加script标签到页面）
  3. 封装jsonp函数

s2 app.js

const express = require("express")
const path = require("path")
const app = express()

// 开启静态资源访问
app.use(express.static(path.join(__dirname,'public')))

app.get("/test",(req, res)=>{
    let obj = {
        name:"张三",
        age:18
    }
    
    // 接收回调函数名称
    // let callback = req.query.callback
    // res.send(`${callback}(${JSON.stringify(obj)})`)

    // 使用方法等同于 上面的代码 回调函数的属性名 为 callback
    res.jsonp(obj)
})

app.listen(3001,()=>{
    console.log("s2 服务器启动")
})

s1 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>s1 html</title>
</head>
<body>
    http://localhost:3001/test
    <button id="btn">发送请求  </button>
    <script>
        // 定义全局函数
        function fun(data){
            // let dat = JSON.parse(data)
            console.log("dat",data)
        }
        let btn = document.getElementById("btn")
        btn.onclick = function(){
            var script = document.createElement('script');
            script.src = 'http://localhost:3001/test?callback=fun'
      
            // 把srcipt添加到页面当中 就会开始请求
            document.head.appendChild(script)

            script.onload = function(){ //js加载完触发
                // 请求完成移除script标签
                script.remove()
            }
            
//			myjsonp({
//			    url:'http://localhost:3001/test',
//			    params:{
//			        id:99
//			    },
//			    success:function(res){
//			        console.log("res",res)
//			    }
//			})
        }
    </script>
</body>
</html>

封装jsonp

调用

myjsonp({
    url:'http://localhost:3001/test',
    params:{
        id:99
    },
    success:function(res){
        console.log("res",res)
    }
})

封装

/*
 * 封装jsonp
 * obj
 *    url:请求地址
 *    params 参数
 *    success 成功回调
 */
function myjsonp(obj){
    
    // 全局函数名称可随机生成
    let fName = '_myjsonp_'+Date.now()

    // 定义全局函数
    window[fName] = function (data){
        obj.success && obj.success(data)
    }
    obj.params.callback = fName
    
    // 参数处理
    let queryString = ''
    Object.keys(obj.params).forEach(key=>{
        queryString += key+"="+obj.params[key]+"&"
    })

    queryString = queryString.substring(0,queryString.length-1)
    obj.url += '?'+ queryString
    

    var script = document.createElement('script');
    script.src = obj.url

    // 添加到页面 开始请求
    document.head.appendChild(script)

    script.onload = function(){ //js加载完触发 请求完成
        // 请求完成移除script标签
        script.remove()
    }
}
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
借助node实战JSONP跨域实例
10-20
【JSONP跨域原理】 JSONP（JSON with Padding）是一种跨域数据交互协议，它的基本思想是利用浏览器允许 `<script>` 标签加载不同源的脚本这一特性，通过动态创建 `<script>` 标签并设置其 `src` 属性来发起请求。...
AngularJS实现的JSONP跨域访问数据传输功能详解
10-19
JSONP (JSON with Padding) 是一种跨域数据交互协议，它允许JavaScript从不同的域名获取数据，从而绕过浏览器的同源策略限制。同源策略是浏览器为了安全考虑，禁止页面加载或执行来自不同源的脚本。然而，JSONP利用...
jsonp解决同源限制问题
qq_45516629的博客
03-30 212
跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。 如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。 如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。 1、将不同源的服务器端请求地...
原生js封装jsonp，解决跨域问题
zyf19971112的博客
10-15 1035
function jsonp(url, options) { // 创建script标签 var $script = document.createElement('script'); // 解决缓存问题 var f = url.indexOf('?') &gt; - 1 ? '&amp;' : '?'; url += f + '_=' + Date.no...
jsonp跨域的src回调函数为什么要随机
yawn_9410的博客
12-01 424
其实不是要随机，而是要唯一性。因为 JSONP 的回调实际上是创建了一个临时的函数供加载的 js 调用。如果不唯一的话，同时发出多个 JSONP 请求，前面的函数就会被覆盖掉，后面的方法就没法执行了。 如果你能确保页面中不会同时出现多个请求， 也没Jsonp请求的响应体通常为 callback(dataObject)，callback即回调函数名。为保证Jsonp正常运作，在发出请求之前需要在wi...
jsonp 跨域原理详解
beichen3997的博客
04-19 2681
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。 JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程...
JSONP跨域请求原理解析
shao_xuan_的博客
12-15 1175
JSONP跨域请求原理解析什么是同源策略什么是JSONP 什么是同源策略 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。 简单来讲，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 什么是JSONP JSONP是J
jsonp跨域原理,使用以及同源策略
zhangsir的博客
07-30 7963
什么是跨域请求,为什么用跨域 浏览器从一个域名的网页去请求另一个域名的资源时，域名,端口,协议任何一个不同，都算是跨域请求 域名是一个网站的唯一标识,一个域名代表着一个网站以及其对应的服务 服务间调用可以使用基于soa思想的rpc调用,也可以是webservice等等 那么从前端页面发起的调用,就会用到跨域 说跨域就必须先说浏览器的同源策略（SOP(same origin policy)...
jsonp跨域的原理
qq_38756314的博客
05-21 2711
1. 前言 jsonp是一种常用的跨域手段，和反向代理，服务端做跨域处理相比，jsonp更显得方便轻巧，因而被大量用来处理跨域的请求，那么，这种请求方式到底是用了什么黑魔法，来解决令我们头疼的跨域问题。 2. 原理 jsonp其实并没有用到什么黑魔法，能达到跨域这种效果，无非是利用script标签自身的跨域能力。我们知道，img,script,这种标签如果有相应的src，那么便会发起一个htttp请求来请求相应的资源,如果有script标签对应的路径是一个js文件，那么在下载完毕这个js之后会马上
JSONP跨域原理解析
qq_28764223的博客
06-14 223
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显...
Jsonp解决Ajax跨域问题
泽宇的博客
01-25 9226
一、介绍 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。 1、同源策略 浏览器有一个很重要的概念—
jsonp和跨域1
08-08
总结，跨域问题可以通过JSONP方法来解决，它利用了标签的特性绕过同源策略，通过动态创建标签并指定src属性指向跨域的JSON数据源，再由服务器返回包裹在回调函数中的数据，从而实现跨域数据的获取。这种方法在需要向...
利用JQuery jsonp实现Ajax跨域请求json数据
05-18
在以上代码中，服务器接收到请求后，将返回的数据以JSON格式封装在回调函数内，客户端接收到响应后会自动执行这个函数，将数据解析并处理。 总结起来，jQuery的jsonp机制使得跨域请求变得简单。通过在客户端设置`...
跨域jsonp1
最新发布
08-08
总结来说，JSON 作为一种高效的数据交换格式，广泛用于 Web 服务接口，而 JSONP 是一种巧妙的跨域解决方案，但存在一定的局限性。随着 CORS（跨源资源共享）等更安全的跨域技术的发展，JSONP 的使用逐渐减少，但仍...
axios 的理解和使用 axios.create(对axios请求进行二次封装) 拦截器 取消请求(axios.CancelToken)
热门推荐
weixin_42448623的博客
03-10 4万+
目录axios是什么axios特点axios常用语法axios安装axios简单使用默认get请求postputdeleteaxios难点语法axios.create(config) 对axios请求进行二次封装axios的处理链流程 拦截器拦截器简单使用多个拦截器取消请求1. 基本流程2. 实现功能在 请求拦截器里面统一添加取消请求在 响应拦截器里面统一添加 处理取消请求代码简化 实现上...
打开 命令行窗口（PowerShell,cmd）的多种方式
weixin_42448623的博客
07-01 3801
cmd 第一个方法 然后回车 第二个方法 选中文件夹 Shift + 右键 打开命令行工具 第三个方法 window + R 输入cmd 回车 第四个方法 开始 输入cmd PowerShell window + R 输入PowerShell 回车 开始 输入PowerShell ...
npm 运行多个指令concurrently 不同目录 --prefix
weixin_42448623的博客
09-04 2844
文章目录解析运行多个命令 concurrently运行指定目录的命令核心示例目录结构client/package.jssonpackage.jsson运行 在node_vue 目录在client运行 node和vue脚手架 解析 运行多个命令 concurrently concurrently npm 文档 concurrently安装 npm i concurrently --save-dev package.json "scripts":{ "order1":"node a.js", "ord
express 404页面配置
weixin_42448623的博客
12-17 1841
express 对于没有设定的请求路径，默认会返回 Cat not get xxx 配置 要配置 express-art-template 要在路由配置之后增加一个 app.use(function(req,res){ res.render("404.html") }) 完整案例 /** * app.js 入口模块 * 启动服务 * 做一些服务相关配置 * 模版引擎 * ...
node 读取一个目录中所有子目录和文件
weixin_42448623的博客
06-27 1578
/** * 读取一个目录中所有子目录和文件 */ const fs = require('fs') const path = require('path') class File { constructor(filename, name, ext, isFile, size, creeateTime, updateTime) { this.filename = filename this.name = name // 文件名 this.ext =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值