Ajax跨域及解决方案
了解跨域之前,我们要了解浏览器的同源策略
同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能
通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:
① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
② 无法接触非同源网页的 DOM
③ 无法向非同源地址发送 Ajax 请求
什么是跨域
同源指的是两个 URL 的协议、域名、端口一致,反之,则是跨域
出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互
注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
如何实现跨域数据请求
现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONP
和 CORS
。
JSONP
:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET
请求,不支持 POST
请求。
CORS
:出现的较晚,它是 W3C
标准,属于跨域 Ajax
请求的根本解决方案。支持 GET
和 POST
请求。缺点是不兼容某些低版本的浏览器
代理方案:(目前还没学到,暂不阐述)
一、JSONP
的实现原理(⭐⭐⭐)
由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是 标签不受浏览器同
源策略的影响,可以通过 src
属性,请求非同源的 js
脚本。
因此,JSONP
的实现原理,就是通过 标签的 src
属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据
定义一个success
回调函数:
<script>function success(data) {console.log('获取到了data数据:')console.log(data)}</script>
通过 标签,请求接口数据:
<script src="http://www.ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&a
ge=20"></script>
JSONP
的缺点
由于 JSONP
是通过 标签的 src
属性,来实现跨域数据获取的,所以,JSONP
只支持 GET
数据请求,不支持 POST 请求。
注意: JSONP
和 Ajax 之间没有任何关系,不能把 JSONP
请求数据的方式叫做 Ajax,因为 JSONP
没有用到
jQuery
中的JSONP
jQuery
提供的 $.ajax()
函数,除了可以发起真正的 Ajax
数据请求之外,还能够发起 JSONP
数据请求,例如:
$.ajax({url: 'http://www.ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',// 如果要使用 $.ajax() 发起 JSONP 请求,必须指定 datatype 为 jsonpdataType: 'jsonp',success: function(res) {console.log(res)}
})
默认情况下,使用 jQuery
发起 JSONP
请求,会自动携带一个 callback=jQueryxxx
的参数,jQueryxxx
是随机生成的一个回调函数名称
自定义参数及回调函数名称
在使用 jQuery
发起 JSONP
请求时,如果想要自定义 JSONP
的参数以及回调函数名称,可以通过如下两个参数来指定:
$.ajax({url: 'http://www.ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',dataType: 'jsonp',// 发送到服务端的参数名称,默认值为 callbackjsonp: 'callback',// 自定义的回调函数名称,默认值为 jQueryxxx 格式jsonpCallback: 'abc',success: function(res) {console.log(res)}
})
jQuery
中JSONP
的实现过程
jQuery
中的 JSONP
,也是通过 标签的 src
属性实现跨域数据访问的,只不过,jQuery
采用的是动态创建和移除标签的方式,来发起 JSONP
数据请求。
在发起
JSONP
请求的时候,动态向 中 append 一个 标签;在
JSONP
请求成功以后,动态从 中移除刚才append
进去的 标签;
二、CORS
概念:
1.这个方法出现较晚,它是W3C标准,属于跨域Ajaax请求的根本解决方案。支持GET和POST请求。
2.缺点是不兼容某些低版本的浏览器(IE10以上)
实现方式:
浏览器需要IE10以上,服务端进行跨域处理
实现原理:
CORS的跨域处理主要是在服务端进行处理,通过在“服务端”设置请求头的方式来处理跨域问题
具体可以参考下面阮一峰老师博客
详细步骤请移步到:https://www.ruanyifeng.com/blog/2016/04/cors.html
另外附上最近学习的express中的跨域请求问题链接:
https://www.cnblogs.com/yourstars/p/6897626.html
Ajax跨域及解决方案相关推荐
- PHP下ajax跨域的解决方案之CORS
PHP下ajax跨域的解决方案之CORS 参考文章: (1)PHP下ajax跨域的解决方案之CORS (2)https://www.cnblogs.com/jkko123/p/6294625.html ...
- 【JS】AJAX跨域-JSONP解决方案(一)
[JS]AJAX跨域-JSONP解决方案(一) 参考文章: (1)[JS]AJAX跨域-JSONP解决方案(一) (2)https://www.cnblogs.com/h--d/p/11470534. ...
- 关于Ajax跨域的解决方案
关于Ajax跨域的解决方案和一些个人理解 Ajax跨域的原因 Ajax跨域的解决方案 Ajax跨域的原因 浏览器限制 跨域(协议.主机名.端口有一个不同就会产生跨域) xhr请求(XMLHttpReq ...
- ajax中cors解决跨域,AJAX 跨域 CORS 解决方案
两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现在比较流行写单页应用,而单页应用在访问 API 的时候就会有跨域的问题 要解决跨域的问题,其实也并不复杂,有两种方案可以选择 ...
- js ajax 跨域问题 解决方案
什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下 ...
- ajax跨越html,ajax跨域的解决方案
什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容(参考js的同源策略). 但是我们项目开发过程中,经常会遇到在一个页面的JS代码中, ...
- ajax跨域情况解决方案,ajax跨域解决方案.docx
ajax跨域解决方案 ajax跨域解决方案 篇一:使用JSONP解决Ajax跨域访问问题 使用JSONP解决Ajax跨域访问问题 JSONP(JSON with Padding)是JSON的一种&qu ...
- ajax跨域问题解决方案
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
- Ajax跨域请求解决方案——jsonp
转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 1.一个众所周知的问题,Ajax直接请求普通 ...
最新文章
- Windows下电脑硬盘的日常维护细则
- ora-01740: 标识符中缺失双引号_sql语句中单引号的使用
- mybatis显示sql语句 log4j.properties配置文件
- 2017浙江省赛 B - Problem Preparation ZOJ - 3959
- 4.0 多线程基础篇
- 排序算法java实现
- linux 远程挂载摄像头_如何实现嵌入式Linux下USB摄像头视频采集
- html盒子中盒子排列,css3中弹性盒排布使用方法
- 服务器内部错误_阿里云服务器被CC攻击怎么办
- centos vim编辑器 第八节课
- 防止登录页面出如今frame中
- p41_数据报与虚电路
- luogu2508 [HAOI2008]圆上的整点
- 如何用JAVAC一次性编译多个包下的JAVA文件 ;JAVA和JAVAC 命令行;java 带有包名编译并运行,附带外部依赖jar包运行
- 帝国php改密码后登录不进去,帝国cms后台不能登录的解决方法
- 幼麟棋牌登录socket服务器分析
- 每日刷题记录 (十五)
- ‘dict_keys‘ object does not support indexing错误解决
- 我为什么反对提“全栈工程师”?
- Golang 实现Windows服务
热门文章
- 仿小刀娱乐网娱乐网搭建 个人技术网模板网站源码
- 基于Attention的Seq2Seq
- matlab C 混编 --- 在MATLAB中使用c语言函数
- 【OpenGL】计算机图形学实验一:OpenGL基础实验(实验环境的熟悉、简单图形的绘制和输出)
- 壁行式起重机设计_玉米播种机的设计_残疾人轮椅设计_破冰除雪机设计_单转子可逆式锤式破碎机设计_全液压升降机设计_振动压路机振动轮设计_旋转型灌装机设计_搬运机械手及其控制系统设计……
- 电信iot平台和移动oneNet平台使用心得
- 财务报销流程培训PPT模板
- Java自定义异常封装
- IDF 聪明的小羊 栅栏密码
- 2022-07-18 Linux df、free、chown、crontab命令