Ajax(跨域请求)
JSONP 跨域请求
CORS 跨域请求
proxy代理请求
1.什么是跨域
首先,现代浏览器为了安全,做了一个同源限制.
也就是所谓的同源安全策略.
本质上,其实是不存在所谓的跨不跨域的.
把浏览器想象成一个发送网络请求的软件.
按照道理来说,请求都是可以发送出去的.
但是在 web 端,浏览器里,这么做的就不合适.
如果网络上的接口可以不受限制的被任意人调用.
那将是一个非常混乱的场景.
所以,为了防止这种情况,浏览器做了这个同源策略来防止这种情况发生.
对,一般服务器不管这个事情.跨域指的是,A网站内部向B网站发送一个AJAX请求.
由于浏览器有同源策略的限制,默认情况下,是不允许 A网站向 B 网站请求数据资源的.
http://my.website.com/ ---> http://your.website.com/ 是不允许的.
具体来说,凡是发送请求中,协议,主机名,端口号 有一个不同,即为跨域请求.
协议相同 + 域名相同 + 端口号相同
浏览器才认为是同一个网站.
才不同受到同源策略的影响.
才可以正常的发送 AJAX 请求.
演示跨域问题:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button type="button" onclick="sendAjax()">发送Get请求</button></body><script type="text/javascript">function sendAjax() {//创建对象var xmlhttp = new XMLHttpRequest();//发送请求xmlhttp.open("GET", "https://tool.bitefu.net/shouji/?mobile=13259141515", true);xmlhttp.send();//接收服务器的响应xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//接收后台响应的json字符串var jsonStr=xmlhttp.responseText;console.log(jsonStr);//var jsonObj= JSON.parse(jsonStr);}}}</script>
</html>
上述代码请求不到,因为后台没有设置请求头
2.利用JSONP的方式来进行跨域请求
JSONP 跨域的原理,就是利用 某些标签,跨域请求时,不受同源策略的限制 比如 script img
JS原生方式的JSON跨域
JSONP 跨域 跟XMLHttpRequest 异步请求对象没关系
JSONP:他只支持GET请求
利用标签来获取图片:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body><img src="https://cn.vuejs.org/images/logo.svg" width="150" height="150"></body><script type="text/javascript">//JSOP 处理跨域的原理是,利用某些 html 标签不受同源策略的限制,来发送请求。比如 img script//所以,我就利用 script 来进行跨域请求alert($)</script>
</html>
JSONP跨域请求:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button type="button" onclick="send()">发送请求</button></body><script type="text/javascript">//获取后台响应数据的回调函数名function getJsonData(res) {console.log(res);alert(res.isp);}function send(){var sc=document.createElement("script");sc.src="https://tool.bitefu.net/shouji/?mobile=13259141515&callback=getJsonData"}</script><!-- 利用script标签不受同源策略的影响来发送跨域请求。callback=getJsonData 指定jsonp方式回调函数。这个参数是大家利用jsonp的方式约定俗成的一个参数。一般这个参数的名字叫做 callback ,除非他指定了JSONP 方式后台返回的数据getJsonData({"name":"zhangsan","age":23})getJsonData({"isp":"\u4e2d\u56fd\u8054\u901a GSM","province":"\u9655\u897f","city":"\u5546\u6d1b","postcode":"726000","citycode":"0914","areacode":"611000","status":1,"mobile":"13259141515"})--><script src="https://tool.bitefu.net/shouji/?mobile=13259141515&callback=getJsonData"></script>
</html>
3.JQuery 封装过后的JSONP请求
补充:你要指定回调函数名,/jsonpCallback: 'hehe', 可以自己定义,jsonp的回调函数名
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script></head><body><button type="button">jsonp请求</button></body><script type="text/javascript">function hehe(data) {alert(data.isp);}$('button').click(function() {$.ajax({type: "GET",url: "https://tool.bitefu.net/shouji/",data: {mobile: "13259141515"},//指定 callbackjsonp: "callback", //jsonp 请求 回调函数名Jqurey会自动生成 //jsonpCallback: 'hehe', // 你要指定回调函数名,jsonpCallback: 'hehe', 可以自己定义,jsonp的回调函数名success: function(res) {console.log(res);},//后台返回的数据类型dataType: "jsonp"});})//https://tool.bitefu.net/shouji/?callback=jQuery111307619785128408234_1642557156066&mobile=13259141515&_=1642557156067// jQuery111303327070950733343_1642557233081({"isp":"\u4e2d\u56fd\u8054\u901a GSM","province":"\u9655\u897f","city":"\u5546\u6d1b","postcode":"726000","citycode":"0914","areacode":"611000","status":1,"mobile":"13259141515"})//JSONP 不足之处,就是只支持get请求。//天气预报,笑话接口 ,用的是cors这种方式来解决跨域问题的。</script>
</html>
4.getJSON() 方法简化 jsonp 请求
Jquery还有简化的JSONP请求
getJSON() 他可以判断你是跨域请求,还是非跨域请求,都能处理
callback=? 回调函数名给个? 让Jquery随机生成一个回调函数名
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script></head><body><button type="button">jsonp请求</button></body><script type="text/javascript">$('button').click(function() {$.getJSON("https://tool.bitefu.net/shouji/?mobile=13259141515&callback=?", function(res) {alert(res.isp);});})</script>
</html>
5.CORS 跨域
浏览器在检测到你发送的 ajax 请求不是同源请求时,会自动在 http 的头部添加一个 origin 字段.
请求头:Origin:http://localhost:8080
获取不到数据的原因也很简单:
• 这是一次跨域请求.
• 请求确实发送到服务器了.
• 服务器也把数据返回到了浏览器.
• 但是服务器返回的响应头里,没有告诉浏览器哪个域名可以访问这些数据(也就是没有设置 Access-Control-Allow-Origin)
• 于是浏览器就把这个数据丢弃了.我们也就无法获取到这个数据.这个时候,只需要后台在相应头里加上一个 Access-Control-Allow-Origin:* 即可完成跨域数据获取.
//后台Java代码
response.setHeader("Access-Control-Allow-Origin", "*");
CORS 跨域方案简单总结:
• 当浏览器发送一个请求是跨域的时候,会自动加上 Origin
• 需要后台配合设置响应头 Access-Control-Allow-Origin:*|Origin即可完成跨域.
• CORS 支持 GET,POST 常规请求.
• 同时也支持 PUT,DELETE等非 post,get的请求,但会先发一次预检请求.
前台正常发送请求,后台设置对应的响应头
6.proxy代理请求模式
核心思想是:
让前端请求我们自己的后台,让后台去跨域请求真是的数据,然后把数据返回给前台.
实现方式,可以利用 nginx 做反向代理.以及我们自己写一个后台中转的服务器.
把前台代码写到后台,然后发送请求。
Ajax(跨域请求)相关推荐
- js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...
- JSONP实现Ajax跨域请求
前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...
- 用iframe设置代理解决ajax跨域请求问题
用iframe设置代理解决ajax跨域请求问题 参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...
- Ajax跨域请求,无法传递及接收cookie信息解决方案
Ajax跨域请求,无法传递及接收cookie信息解决方案 参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...
- Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案
Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案 参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...
- AJAX跨域请求数据原理与案例
1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...
- ajax跨域请求原理,Ajax跨域请求的原理(图文教程)
这篇文章主要为大家详细介绍了Ajax跨域请求的原理,Ajax怎么样做跨域请求?具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Ajax跨域请求的具体实现过程,供大家参考,具体内容 ...
- ajax跨域请求问题总结
总结一下近期遇到ajax跨域请求问题 业务场景描述: 移动端页面放在阿里云服务器 进入页面后, 需要访问另一个服务器的接口,ajax请求使用用GET,POST,PUT等方法 服务端需要进行cors配置 ...
- Nginx 实现AJAX跨域请求
AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: 1 ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
最新文章
- R语言实战-统计分析基础-描述性统计4-psych-describe
- Redis—字符串和SDS
- 如何解决System.Web.HttpRequestValidationException的异常
- HDU 1021 Fibonacci Again
- 2022年最强大数据面试宝典(全文50000字)
- lvm卷的缩减和扩容
- web.xml不同版本的头
- Java机器人解密游戏_解谜类游戏 篇十:在机器人的世界中,那些隐藏在谜题之下的眼泪...
- 什么是做空? 什么是做空和做多离岸人民币?
- shell(37) : java控制台运行打印颜色字体
- 尤大都推荐的组件库是如何开发出来的?
- python编程入门指南磁力下载-实战Python语言实现BT种子转化为磁力链接
- 如何用PS去掉照片中的路人
- java wps 二次开发,Wps二次开发(POI)
- hadoop安装步骤
- 关于面试中的TCP和UDP怎么用自己的话给面试官说
- html 自动隐藏属性,hidden
- Android 高质量开发之崩溃优化,kotlinnativerust跨端
- 中国历史上农村剩余劳动力的安置政策
- linux中文语言包rpm下载,centos中文语言包下载-centos中文语言包 fonts-chinese-3.02-12.el5.noarch.rpm下载__飞翔下载...
热门文章
- pointnet train 第十句correct = tf.equal(tf.argmax(pred, 1), tf.to_int64(labels_pl))
- 数据挖掘经典十大算法_条件熵、信息增益介绍
- Firefox和IE浏览器清除缓存方法
- useLocalStorage
- Java:5大最佳Java库
- Python同步学习(一)
- JS - 函数柯里化
- pycharm删除文件后怎样找回
- 欧拉回路(欧拉路径)
- 4月中国App开发商推广排行榜