jsonp跨域请求(PHP后端方式)
一、什么是跨域?
前言
在了解什么是跨域之前,我们先需要知道为什么跨域?
为什么跨域?这就涉及到绕不开的一个话题——同源策略。
为了web安全,同源指的是协议、端口号、域名三者皆要相同的情况下,访问是不受限制的,比如说,你拿着你家的钥匙,在你家任何一间屋子都是可以来回开门走动的,而当你拿着自己家的钥匙去隔壁老王家是,发现连人家的大门都打不开,这就是同源策略。同源策略最初的目的为了保证用户信息的安全,防止恶意的网站窃取数据,但是对于类似数据量大、访问并发高的淘宝、京东,显然一个域名或服务器是扛不住的,这个时候就要实现分流,将自己的数据分门别类存储。等用户需要的时候从不同的服务器上请求过来,然后组装之后返回给浏览器解析即可。
而跨域呢?就是为了解决上述问题而产生的非官方操作方法。说白了就是为了能够拿着自己家的钥匙去开隔壁老王家的门所产生的的一个解决方案,这里跨域的解决手段有很多,本篇主要写jsonp方式实现跨域。
jsonp的跨域
- 我们知道像script、img这样的标签的src属性是可以填写url的且不受同源策略的限制的,因此,就利用这个特性进行跨域。
- 基于实际开发需求,我们可以动态创建script标签来跨域(因为很多时候我们根本不知道哪些地方会用到跨域,而且静态创建script标签操作不方便,同时会导致页面结构冗余,产生大量的script标签,因此动态创建和追加是最好的选择)
- JSONP是指客户端用GET方式传递一个callback参数给服务端,然后在服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据来返回给客户端(生成JS代码),然后客户端,用JS动态生成script标签,并指定该script的src属性等于服务器返回的数据(服务器生成的JS代码),这样服务器端返回的数据,就可以成为脚本的一部分。并将该这样客户端就通过callback函数来处理返回数据了
- 下面是HTML代码
<script>document.querySelector('button').onclick = function(){let sc = document.createElement('script');sc.src='http://localhost/day31/data.php?cb=fn';document.body.append(sc);}function fn(data){/* let dataArr = data.split('&');dataArr.forEach((v) => {let val = v.split('=');console.log(val[0],val[1]);}); */console.log(data);}</script>
ps:注释部分不用看,这是我对返回数据的分割处理操作,为了简单方便,我们直接把后端数据打印输出到控制台即可
PHP后端代码:
简单模拟后端数据
结果:
这其实已经实现了跨域,PHP服务器是在localhost域名下,html文件是在127.0.0.1域名下
问json与jsonp的的区别?
json是一种通用的数据交换格式,主要实现数据的传输与储存。
jsonp是一种非官方协议,主要为了解决Ajax跨域请求问题
jsonp跨域请求(PHP后端方式)相关推荐
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- 原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
- 轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求 一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
- JS的jsonp是什么?5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
- 【漏洞利用】JSONP跨域请求漏洞 挖掘、利用详解
参考文章 轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略 跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
- Jsonp 跨域请求实例
Jsonp 跨域请求实例 关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...
- jsonp跨域请求响应结果处理函数(python)
接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...
- 实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
最新文章
- python可视化界面编程 pycharm_pycharm开发一个简单界面和通用mvc模板(操作方法图解)...
- 星际通讯+基于区块链的价值共享互联网即时通讯应用平台
- Java多线程基础总结
- [Ubuntu 10.04]Firefox中Flash汉字乱码问题的解决
- linux缓冲设备,Linux设备驱动程序缓冲策略
- Atitit.收银系统pos 以及打印功能的行业标准
- 特效编辑器开发手记2——cocos2d-x粒子系统的plist文件
- Shader编程教程_Shader新手入门视频教程_Shader编程从入门到精通
- Hive | 用sort_array函数解决collet_list列表排序混乱问题
- windows 许可证即将过期,解决方案
- VPX SRIO交换板VPX3U-1Swit-CPS1848
- python NLP中文近义词
- python qt5开发实例_python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
- API MISUSE: <CBCentralManager: 0x000000000> can only accept this command while in the powered on
- c语言英语教学大纲,C语言教学大纲(《大学C语言实用教程》)
- 百度地图 web 开发 BMap.point格式
- 易语言修改IP和DNS
- (附源码)springboot实验室预约管理系统 毕业设计 261141
- linux刷新分区表,linux磁盘分区的详细步骤(图解linux分区命令使用方法)
- gitlab解决permission deny问题
热门文章
- Python设置画布大小_Python 之 Tkinter Canvas画布
- hashlib模块の拾遗
- 2021年A证(安全员)考试报名及A证(安全员)考试平台
- nodejs离线安装及环境配置,javascript菜鸟教程离线
- HDU 5266 pog loves szh III【LCA RMQ】
- kurento教程_如何使用WebRTC和Kurento媒体服务器,来建立视频会议App(一)
- oracle中时间格式的写法,Oracle中时间的格式
- PMP考试答题技巧及注意事项
- 世有良药良术之服用中药一周治愈几十年过敏性鼻炎
- bzoj 3993 星际战争 - 二分答案 - 最大流