day23 同源策略及JSONP

news/2024/3/28 20:51:08/文章来源:https://www.cnblogs.com/itlulu/p/16849199.html

 

同源策略 ( 浏览器的一种机制 )

概述 :

浏览器为了安全 , 产生的一种同源策略 , 这个策略是为了防止一些恶意的请求 , 保护用户的隐私 .

同源策略主要有三个内容 , 分别为

  • 同协议 ( http / https )

  • 同ip地址 ( 127.0.0.1 表示本机 )

  • 同端口号 ( 80HTTP的 , 443HTTPS的 )

如果不同源就会产生跨域

跨域问题的产生 ( 以下任意一点不同就会跨域 )

  • 协议不一样

  • 端口不一样

  • ip地址不一样

  • 以文件访问 ( 不同的文件资源也会跨域 )

跨域问题的解决

1.前端解决 ( JSONP ) ( 需要后端给的是JSONP的接口 )

2.后端解决 ( 在对应的响应头进行设置 )

3.使用服务器代理 ( proxy )

4.使用websocket ( 走的不是http协议 )

 

JSONP

概述 :

 

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题 . 

然后它是通过script标签不受跨域影响的特性来解决的 , 核心就是对应的请求是服务器自己去请求再将数据通过回调函数传过来 ( 核心请求是get请求 )

简单的jsonp

<script>// JSONP就是利用script标签不会受跨域的影响来实现的,通过服务器的回调函数拿到数据再传过来// 它会自动执行你传入的回调函数并将结果传递给这个函数,res里面就会执行完这个数据function callback(res) {console.log(res)}
</script>
<!-- wd表示关键词  cb表示回调函数 -->
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=callback">
</script>

JSONP封装

// 封装jsonp
export const jsonp = (url, params, callbackName, callback) => {// 遍历参数,判断url内是否存在?for (let key in params) {if (url.includes('?')) {url += `&${key}=${params[key]}`} else {url += `?${key}=${params[key]}`}}// 随机生成一个函数名并赋给回调函数let fnName = 'fn' + Date.now()window[fnName] = callback// 将回调函数的名字拼接到url上url += `&${callbackName}=${fnName}`// 创建一个script标签在页面上并设置url属性let script = document.createElement('script')script.src = urldocument.body.appendChild(script)// 创建后触发onload加载事件script.onload = () => {// 加载完成后删除函数和script标签delete window[fnName]script.remove()}
}

调用

<script type="module">//导入jsonp
    import { jsonp } from './00.js'var ul=document.querySelector('ul')//给input框添加输入触发事件
    document.querySelector('input').oninput = function () {//调用
        jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {wd: this.value},'cb', (res) => {console.log(res)ul.innerHTML=''//渲染
            res.s.forEach((item)=>{ul.innerHTML+=`<li>${item}</li>
                    `})})}
</script>

百度搜索案例

// 封装一个jsonp的promise方法
// url地址,参数,回调函数名称
export const jsonp = (url, params, callbackName) => {// 直接返回一个promise对象return new Promise((resolve, reject) => {// 遍历参数,判断url是否存在'?',没有就加上,有就加上后面的数据for (let key in params) {if (url.includes('?')) {url += `&${key}=${params[key]}`} else {url += `?${key}=${params[key]}`}}// 随机生成函数名let fnName = 'fn' + Date.now() + Math.ceil(Math.random() * 21)// 把函数加到window上window[fnName] = resolve// 拼接url地址url += `&${callbackName}=${fnName}`// 创建script标签并设置url属性再加到页面上let script = document.createElement('script')script.src = urldocument.body.append(script)// 加载完成后就删除函数和标签script.onload = () => {delete window[fnName]script.remove()}// 有报错就执行rejectscript.onerror = () => {reject()}})
}

调用

<input type="text">
<ul></ul>
<script type="module">// 导入jsonp
    import { jsonp } from './00.js'let ul = document.querySelector('ul')// 给input添加输入就触发事件
    document.querySelector('input').oninput = function () {// 调用方法
        jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {wd: this.value}, 'cb').then((res) => {console.log(res)// 渲染
            ul.innerHTML = ''res.s.forEach((item) => {ul.innerHTML += `<li>${item}</li>
                    `})})}
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_410475.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国考省考申论:2次阅读法:1读感知材料类型和段落关系,2读根据问题词,原因词,影响词,对策词,关联词把握得分要点

国考省考申论&#xff1a;2次阅读法&#xff1a;1读感知材料类型和段落关系&#xff0c;2读根据问题词&#xff0c;原因词&#xff0c;影响词&#xff0c;对策词&#xff0c;关联词把握得分要点 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#x…

学习笔记:Nim 游戏

学习笔记:Nim 游戏 0 一些定义与概念 公平组合游戏(Impartial combinatorial game, ICG) 公平组合游戏满足:由两名玩家交替移动; 在游戏进程的任意时刻,可以执行的合法行动与轮到哪名玩家无关; 不能行动的玩家判负。Nim 游戏属于公平组合游戏。但常见的棋类大部分都不是…

【2022-11-01】前端Vue框架(六)

一、Vuex的使用 Vuex基本使用 # 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。# 使用步骤:1 在state中定义变量2 在组件中通过this.$store.dispatch(action…

虚拟存储器-11.1

虚拟存储器-11.1 1.虚拟存储器概述 1.1局部性原理 1.程序的局部性原理&#xff1a;程序在运行的时候局限在某个局部的地方。 2.虚拟存储器的工作基本情况 运行时在内存运行时不在内存需要时调入内存不需要调出内存 2.虚拟存储器实现的方法 2.1请求分页技术 2.1.1思想 分…

python标记删除如何实现?

python标记删除如何实现&#xff1f; 说明 1、主要解决循环引用的数据。因为引用大于0&#xff0c;不会回收。 2、标记删除是为了解决这个循环引用不能删除的问题。 3、对于删除操作后的每一个引用-1&#xff0c;此时num,num1的引用为0&#xff0c;将其放入死亡容器中&#…

VSCode下载安装与使用教程

目录1. 打开官网进行下载安装2. 下载3. 安装4. 使用4.1 extensions4.2 Python编译器4. 运行python代码的 3 种方法参考资料VSCode是一款免费开源的现代化轻量级代码编辑器&#xff0c;下面就简单的带大家一起来下载和安装VSCode。 1. 打开官网进行下载安装 官方下载链接&…

设计模式系列之MVC模式

这里写自定义目录标题1、设计模式概要最基本的设计模式使用设计模式的好处2、MVC模式MVC实例&#xff1a;模型 models.py视图views.py控制器 Controller.py3、优缺点总结1、设计模式概要 定义&#xff1a; 设计模式是由众多的软件开发人员经过长期的积累&#xff0c;不断试错改…

uniapp老项目添加自动化部署并配置多环境

我司其他项目都是通过jenkins打包部署的&#xff0c;只有uniapp项目要前端通过hbuilderx手动打包上传到git&#xff0c;为了方便操作&#xff0c;改造老项目&#xff01; 创建一个新的uniapp项目 参考&#xff1a;https://uniapp.dcloud.net.cn/quickstart-cli.html 安装vue…

顺应国家趋势,争做爱国程序员

当今社会&#xff0c;为了不再使我国面临“缺芯”的情况下&#xff0c;先进计算技术逐渐成为我国的发展趋势。 那&#xff0c;何为先进计算&#xff1f; 百度百科的定义为&#xff1a;先进计算包括超级计算、大数据、人工智能、云计算等多种新兴IT信息技术&#xff0c;先进计…

仿iPhone开关按钮switch

前端开发checkbox 单选按钮做开关https://github.com/weatherstar/switchgithub下载 渲染事件方法 defaults { size : ‘default’ , checked : undefined , onText : ‘Y’ , offText : ‘N’ , onSwitchColor : ‘#64BD63’ , offSwitchColor : ‘#fff’ , onJackColor : ‘…

html实现飞机小游戏(源码)

文章目录1.思路讲解1.1 游戏设计1.2 主界面1.3 倒计时进入游戏1.4 游戏效果1.3 游戏结束2.实现源码2.1 游戏动态效果2.2 游戏主代码2.3 源码目录源码下载作者&#xff1a;xcLeigh 文章说明 html实现飞机大战源码&#xff0c;酷炫的界面效果&#xff0c;有四款飞机大战背景&…

2022高频经典前端面试题(es6+webpack+http网络+性能优化中篇,含答案)

ES6篇 1. ES6的新特性?&#xff08;必考&#xff09; 参考阮一峰的es6文档&#xff1a;https://es6.ruanyifeng.com/ let、const变量的解构赋值模板字符串&#xff08;可以直接进行变量拼接&#xff09;箭头函数… 展开运算符可以将数组或对象里面的值展开&#xff1b;还可以…

面试被问到如何排查JVM问题的,如何回答?

一、首先说可用工具 1、jmap可以查看当前Java进程的内存占用,把内存快照dump出来 用法:jmap [option] <pid> 常用命令jmap -heap pid 主要显示堆的内存使用情况,包括分代情况,每个代的总容量、已使用内存、可使用内存,如图: jmap -dump:live,format=b,file=xxx…

发第一篇SCI有哪些技巧?

正所谓万事开头难&#xff0c;每当第一次做某一件事情总是难以开展的。因为那时我们没有一定的方法和技巧去完成这些事。比如 SCI论文是无数科研人员认可的学术文献&#xff0c;但是想要在SCI期刊上发表论文是十分困难的&#xff0c;因为在论文创作上尚且不成熟&#xff0c;没有…

大学毕业1年,从监工转行软件测试,我拿到了人生第一份8k的offer

大家好&#xff0c;我是小静&#xff0c;是一名IT转行人&#xff0c;2015年毕业于某所XXXX大专&#xff0c;大学学的专业是土木工程&#xff0c;毕业也是不出意外的来到了工地&#xff0c;从事的是一份监工的工作&#xff0c;就是工地上带白帽子的&#xff0c;每个月拿着4000块…

js 之reduce 方法实现数组去重原理分布解析

需求 &#xff1a;当有一个数组对象 我们需要根据数组对象的某个属性进行去重 此时我们用reduce最合适不过 let alin [{id : 001 ,name : 小红},{id : 002 ,name : 小黄},{id : 001 ,name : 小红},]function arrRemoveRepet(arr) {let newArr []; // 去重后得到的新数组con…

生成新冠疫苗接种趋势图-技术和法律学习

生成新冠疫苗接种趋势图-技术和法律学习文档说明:只记录关键地方; 缘由:想看疫苗接种趋势图,我要去哪里找呢?奈何公开的渠道没有找到!自己做一个呗数据来源: http://www.nhc.gov.cn/xcs/xxgzbd/gzbd_index.shtml (信息来自国家卫生健康委员会官方网站) 我要怎么得到数据呢…

靶机20 driftingblues3

描述: __________ 获取标志 难度&#xff1a;简单 1、下载靶场 靶机名称&#xff1a;driftingblues 下载地址&#xff1a; DriftingBlues: 3 ~ VulnHub 2、安装靶场 以DC-1为例&#xff0c;将文件解压&#xff08;一压缩包形式进行下载&#xff09;。 打开虚拟机&#xff0c;选…

K8S二进制部署之定义CA证书与ETCD

文章目录CA证书制作K8S集群证书流程K8S 二进制集群部署K8S二进制部署ETCD集群部署1、docker部署&#xff08;所有节点&#xff09;ETCD集群部署master节点操作小结&#xff1a;查看etcd 启动脚本创建ca证书创建cfssl类型工具下载脚本到node节点修改CA证书 CA证书中包含密钥对 …

浅谈 web3

web3——互联网的未来? web3,很多人觉得是个骗局,是在割韭菜。因为大部分介绍 web3 的文章都离不开 NFT、数字货币、区块链、比特币、以太坊、元宇宙等概念,玄之又玄,脱离我们的生活,没解决我们的痛点。一般文章最后还教给我们怎么炒币,怎么买卖 NFT,妥妥的割韭菜套路,…