跨域获取后台数据undefined_同源策略amp;JSONP跨域

同源策略&JSONP跨域

同源策略

对于同源的定义,MDN给出了这样的解释:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源。

如何确定两个页面是否同源,只要比较两个页面的协议、域名和端口即可。

假设有这样一个页面http://zhihu.com/main.html,相对于它给出同源检测的示例:

2619fd6412f7fb5267159aa338ac1bb5.png

同源策略是浏览器最核心也最基本的安全功能。保证用户信息的安全,防止恶意的网站窃取数据。限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

协议、端口、域名只要有一个不相同,就不符合同源策略,就会出现跨域。最常见的就是AJAX请求数据。

跨域的解决办法

JSONP

JSONP是如何产生的呢?

1.我们都知道使用AJAX直接请求普通文件存在跨域无权限访问的问题,甭管你是什么,只要你是跨域请求,一律不准不可以的;
2.但是我们知道HTML中的<script><img><iframe>等标签不受同源策略的影响,拥有跨域的能力。那我们是否能利用这个特性从其他域下获取数据呢
3.我们得出结论,要想在web端就跨域访问其他域的数据就有一个办法,那就是把数据装进 JS 格式的文件里,这样客户端就能够调用了。
4.但是获取的数据是做为 JS 来执行。于是就有一个问题,数据是 JSON 格式的数据,直接作为 JS 运行的话我如何去得到这个数据来操作呢?
5.于是我们想到是否可以提前在页面上声明一个函数,通过接口传参的方式发送给后台,在经过后台处理发送给前端(所以JSONP 需要对应接口的后端的配合才能实现。)

示例

 <script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后,后端会去解析callback这个参数获取到字符串showData,在发送数据做如下处理:

之前后端返回数据: {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据: showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数,在函数内部处理参数即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。

具体实现 :

server.js代码

9e71f316f10c6b89903e1648eb8691a8.png

index.html代码

48fec99e7085e50b4608c438c1b9c2a5.png

打开Git Bash,进入server.js所在文件夹,输入 node server.js ,浏览器打开 http://localhost:8080/index.html

于是我们得出JSONP的原理

  • JSONP本质上是利用 <script><img><iframe>等标签不受同源策略限制,可以从不同域加载并执行资源的特性,来实现数据跨域传输。
  • JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
  • JSONP的想法就是,与服务端约定好一个回调函数名,服务端接收到请求后,将返回一段 JS代码,在这段JS代码中调用了约定好的回调函数,并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后,就会执行这个回调函数,这时数据已经成功传输到客户端了。

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

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

相关文章

python 除数不能为零的报错有哪些_【社区精选40】Python错误处理及代码调试方法(文末赠书中奖名单)...

本文整理自爱数据学院中的问答更多精彩问答&#xff0c;进入下方社区网站查看http://www.lovedata.cn/invitation社区精选话题 第40期Python错误处理及代码调试方法一次写完代码程序并能够正常运行的概率很小很小&#xff0c;总会有各种各样的错误bug需要处理。有的报错简单&a…

利用python批量查询企业信息_python实现批量获取指定文件夹下的所有文件的厂商信息...

本文实例讲述了python实现批量获取指定文件夹下的所有文件的厂商信息的方法。分享给大家供大家参考。具体如下&#xff1a;功能代码如下&#xff1a;import os, string, shutil,reimport pefileimport codecs, sysimport wximport struct#输出中打印Unicode字符#sys.stdout co…

mac mysql prefpane_【MySQL数据库开发之一】Mac下配置安装数据库-MySQL

本站文章均为那么从今天开始陆续会更新数据库和Hibernate框架的博文&#xff0c;也是Himi学习的历程记录&#xff0c;希望大家能共同讨论和研究&#xff1b;OK&#xff0c;本篇简单介绍安装吧&#xff0c;首先到MySQL官方网站&#xff1a;如上图&#xff1a;点击DOWNLOAD &…

系统新模块增加需要哪些步骤_想要吸引人流,儿童乐园需要增加哪些新设备呢...

儿童乐园是现今最火爆的一个投资项目&#xff0c;因为它的主要消费群体是孩子&#xff0c;而现在的家长们对孩子们的宠爱&#xff0c;基本都会答应让孩子们去儿童乐园里面玩耍。但是儿童乐园的投资经营者也会遇见一些小问题&#xff0c;例如儿童乐园添加设备要怎么选择呢&#…

php mysql 图像_php-向/从MySQL数据库插入/查看图像

我在DB中插入图像时遇到问题.该表具有以下结构&#xff1a;> id-> INT(3)->自动增量>名称-> VARCHAR(30)> extension-> VARCHAR(10)[可能太短]> img-> MEDIUMBLOB插入图像的PHP代码为&#xff1a;if($_FILES[file][error]0){$result is_uploaded_f…

照片打印预览正常打印空白_小米发布口袋照片打印机,可无墨打印3寸背胶照片...

9月11日消息&#xff0c;小米推出一款小米口袋照片打印机。与之前的小米米家照片打印机相比&#xff0c;这款新品更加小巧便携&#xff0c;体积接近充电宝大小&#xff0c;净重仅181g&#xff0c;便于随身携带。小米口袋照片打印机采用ZINK无墨技术打印&#xff0c;即使用嵌入纸…

c中获取python控制台输出_在真实的tim中用C捕获控制台python打印

我正在尝试从C创建一个python进程&#xff0c;并从python脚本获取打印结果。在这就是我的C代码&#xff1a;namespace ConsoleApp1{public class CreateProcess{public String PythonPath { get; set; }public String FilePath { get; set; }public String Arguments { get; se…

python三大编程语言_程序员最需要的三种编程语言

随着科学技术的进步和新技术的进步&#xff0c;编程语言的种类越来越多&#xff0c;变化是程序员需要跟踪和学习许多语言 然而&#xff0c;有太多的语言无法一一掌握 在目前的形式中&#xff0c;最需要掌握的三种编程语言是 现在判断还不晚 坦白说&#xff0c;找工作很容易 它可…

MySQL优化调优有没有做过_MySQL 调优/优化的 100 个建议

MySQL是一个强大的开源数据库。随着MySQL上的应用越来越多&#xff0c;MySQL逐渐遇到了瓶颈。这里提供 101 条优化 MySQL 的建议。有些技巧适合特定的安装环境&#xff0c;但是思路是相通的。我已经将它们分成了几类以帮助你理解。MySQL监控MySQL服务器硬件和OS(操作系统)调优&…

python语句print(type([1、2、3、4))_Python 学习第一天

一、学习内容1.print:表示输出print (“hello world”)单行注释&#xff1a;#多行注释&#xff1a;“““ ”””2.运算符注意&#xff1a;才表示等于&#xff0c;&#xff01;表示不等于3.位运算符&#xff5e;按位取反&#xff1a;&#xff5e;104.变量和赋值teacher“老马的…

mysql核心参数_MySQL技术体系之核心参数

本文主要基于MySQL 5.7版本的数据库环境&#xff0c;总结my.cnf文件中核心参数的配置使用&#xff0c;让更多的人对MySQL技术体系有更全面、更专业的深度了解。一、客户端核心参数1、port端口号&#xff0c;默认33062、socketSocket文件地址&#xff0c;默认以.sock为文件名称后…

svd降维 python案例_SVD(奇异值分解)Python实现

注&#xff1a; 在《SVD(异值分解)小结 》中分享了SVD原理&#xff0c;但其中只是利用了numpy.linalg.svd函数应用了它&#xff0c;并没有提到如何自己编写代码实现它&#xff0c;在这里&#xff0c;我再分享一下如何自已写一个SVD函数。但是这里会利用到SVD的原理&#xff0c;…

salt 启动mysql_saltsack自动化配置day03:服务部署mysql部署

一、MySQL集群需求分享1、抽象&#xff1a;功能模块把基础的写成通用服务部署也要抽象出来模块redis内存有的多&#xff0c;有的少&#xff0c;可以config set在线更改redis 安装、配置、启动mysql 安装、配置(my.cnf可以统一 目录默认配置可以统一)master: server_id 1111slav…

jtag引脚定义_从逆向分析的角度学习硬件调试技巧JTAG,SSD和固件提取

我想从逆向的角度做了深入了解JTAG&#xff0c;JTAG是许多嵌入式CPU使用的硬件级别调试机制&#xff0c;我希望通过这篇文章从逆向工程师的角度解释如何使用JTAG&#xff0c;并在此过程中提供一些实际示例。0x01 研究目标通过这篇文章&#xff0c;我希望做到以下几点&#xff1…

python virtualenv conda_在vscode中启动conda虚拟环境的思路详解

问题&#xff1a;cudatoolkit cudnn 通过conda 虚拟环境安装&#xff0c;先前已经使用virtualenv安装tf&#xff0c;需要在conda虚拟环境中启动外部python虚拟环境思路&#xff1a;conda prompt即将 [虚拟环境位置] 以参数形式传入 [activate.bat]VSOCDE中的设置添加以下语句{&…

python如何导入图片imread_OpenCV 使用imread()函数读取图片的六种正确姿势

经常看到有人在网上询问关于imread()函数读取图片失败的问题。今天心血来潮&#xff0c;经过实验&#xff0c;总结出imread()调用的四种正确姿势。通常我要获取一张图片的绝对路径是这样做的&#xff1a;在图片上右键——属性——安全——对象名称。然后复制对象名称就得到了图…

python2.7与3.7脚本转换_python 2.7 - python 3.7 升级记录

更换的模块python 3.7 模块名python 2.7 模块名python 3.7 包python 2.7包pymysqlMySQLdbPyMySQLMySQL-pythonpdfminerpdfminerpdfminer.sixpdfminerurllib.parseurlparse自带自带htmlHTMLParser自带HTMLparser语法变化1. print 修改为 print()2. except Exception, e 修改为 e…

远程过程调用失败_Java开发大型互联网RPC远程调用服务实现之问题处理方案

引言RPC(Remote Procedure Call Protocol)——远程过程调用协议&#xff0c;它是一种通过网络从远程计算机程序上请求服务&#xff0c;而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在&#xff0c;如TCP或UDP&#xff0c;为通信程序之间携带信息数据。在OSI网络…

chrome 新的session 设置_为什么还是由这么多人搞不懂Cookie、Session、Token?

作者&#xff1a;不学无数的程序员链接&#xff1a;https://urlify.cn/Yfm6Vr# Cookie洛&#xff1a;大爷&#xff0c;楼上322住的是马冬梅家吧&#xff1f; 大爷&#xff1a;马都什么&#xff1f; 夏洛&#xff1a;马冬梅。 7大爷&#xff1a;什么都没啊&#xff1f; 夏洛…

mysql for update用处_for update的作用和用法

一、for update定义for update是一种行级锁&#xff0c;又叫排它锁&#xff0c;一旦用户对某个行施加了行级加锁&#xff0c;则该用户可以查询也可以更新被加锁的数据行&#xff0c;其它用户只能查询但不能更新被加锁的数据行&#xff0e;如果其它用户想更新该表中的数据行&…