学习AJAX必知必会(4)~同源策略、解决跨域问题(JSONP、CORS)
一、同源策略(Same-Origin Policy),是浏览器的一种安全策略.
1、同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务)
2、跨域:违背了同源策略,即跨域。
3、ajax请求是遵循同源策略的。
■ 同源请求例子(在浏览器访问127.0.0.1:9000/server-orign,然后点击按钮发送同源请求):
服务端对同源请求处理:
//3、创建路由规则(request 是请求的报文,response是响应的报文)
app.get('/server-orign', (request, response) => {
//响应一个页面
response.sendFile(__dirname + '/同源策略.html');
});
app.get('/data', (request, response) => {
//响应数据
response.send('服务端返回的数据');
});
客户端html:
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//console.log('测试');
//发送ajax请求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');//同源请求,路径可以简写
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response);
}
}
}
}
二、解决跨域(JSONP、CORS)
1、非官方解决途径JSONP:
(1) JSONP 是什么?
JSONP(JSON with Padding),是一个非官方的跨域解决方案,只支持 get 请求
。
(2) JSONP 怎么工作的?
在网页有一些标签天生具有跨域能力
,比如:img link iframe script。 JSONP 就是利用 script 标签
利用script的路径src作为请求路径,然后只需要服务端返回的数据封装成js代码
即可
■ jsonp例子1:
- 服务端处理,响应返回js代码(跟咱平时引入外部的js代码一样啦):
app.get('/jsonp', (request, response) => {
//响应数据
response.send('console.log("hello jsonp")');
});
- 客户端处理:
<script src="http://127.0.0.1:9000/jsonp"></script>
■ jsonp例子2(验证用户名,显示密码):
服务端处理:
//服务端验证用户名
app.all('/check', (request, response) => {
//响应数据
// response.send('console.log("hello jsonp")');
const data = {
name:'admin',
password:'123456'
};
let str = JSON.stringify(data);
response.end(`handle(${str})`);//调用客户端(前端)的handle方法
});
客户端处理:
用户名: <input type="text" name="name"/>
<p></p> <script>
const input = document.getElementsByTagName('input')[0];
const p = document.querySelector('p'); //声明一个handle函数,用来给服务端调用,以处理服务端返回的数据
function handle(data) {
input.style.border = "solid 1px #f00";
let username = input.value;
//若用户名正确,将服务端返回的数据显示到p标签内
if(username === data.name){
p.innerHTML = data.password;
}
} input.onblur = function () {
//向服务端发送请求(jsonp),检查用户是否存在
const script = document.createElement('script');
//设置script标签的src为ajax的url
script.src = 'http://127.0.0.1:9000/check';
//在界面生成dom元素
document.body.appendChild(script);
}
</script>
❀ jsop跨域访问第三方接口,请求成功,但是却拿不到数据?
从上面的例子可以看到当服务端是第三方(例如访问百度的快递接口:https://express.baidu.com/express/api/express),
通过jsonp跨域方式去访问第三方接口,结果:请求成功,状态码是200,但是无法拿到响应的数据
( 原因1:第三方服务在创建路由规则时,设置不允许跨域访问
,所以提示CORB,无法直接拿到数据;
原因2:想通过script标签的 src='请求url' 引入服务端响应回来的js代码,但是且不知道第三方服务端响应时是怎么书写的,不知道回调了什么函数
总结:jsonp 解决跨域访问,除了类型是GET,还需要服务器的配合才能完成跨域
)
□ 咱自己的服务端没设置允许跨域访问,默认为不允许跨域访问
□ 但是咱设置了在服务端设置请求时响应回去一些js代码(handle函数的调用(data的json对象作为参数)的js代码
)
□ 在客户端咱通过 src='请求url' 引入服务端响应回来的js代码,而咱知道咱服务端响应回来一个handle函数的调用
,所以咱在客户端定义了一个handle回调函数(handle函数的参数是响应回来的json格式的数据)。
2、官方解决途径CORS:
(1)CORS: Cross-Origin Resource Sharing 跨域资源共享, 即服务端设置响应头是允许跨域的
(2)CORS的更多介绍:跨源资源共享(CORS) - HTTP | MDN (mozilla.org)
服务端cors跨域请求处理:
app.all('/cors', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
// response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:9000); //设置响应头(允许自定义请求头)
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应头(允许自定义请求方式)
response.setHeader('Access-Control-Allow-Method', '*'); //设置响应体
response.send('hello cors');
});
客户端处理:
<button>点击发送ajax请求</button> <script>
const btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
const xhr = new XMLHttpRequest();
xhr.open('get', 'http://127.0.0.1:9000/cors');
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
console.log(xhr.response);
}
}
}
}
</script>
学习AJAX必知必会(4)~同源策略、解决跨域问题(JSONP、CORS)的更多相关文章
- 浏览器同源策略,跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- 第二百七十四节,同源策略和跨域Ajax
同源策略和跨域Ajax 什么是同源策略 尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
- JS同源策略和跨域问题
同源策略和跨域问题:http://www.cnblogs.com/chaoyuehedy/p/5556557.html 深入浅出JSONP--解决ajax跨域问题:http://www.cnblogs ...
- 11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用
1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题 工作流程: 浏览器发送请求给服务器,请求登录 服务器返回响应给浏览器,此 ...
- JS同源策略和跨域访问
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只 ...
- Ajax_同源策略以及跨域问题
Ajax_同源策略 同源策略是浏览器的一种安全策略, 同源指的是:协议.域名.端口.必须完全相同. 违背同源策略就是跨域. 而AJAX是默认遵循同源策略的: 同源说通俗一点呢就是页面跟获取请求的接口是 ...
- cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
- 同源、同源策略、跨域问题、django解决方案
什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...
- XSS中的同源策略和跨域问题
转自 https://www.cnblogs.com/chaoyuehedy/p/5556557.html 1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制.比如源a ...
- 同源策略、跨域、json和jsonp
同源策略 源(origin)就是协议.域名和端口号.若地址里面的协议.域名和端口号均相同则属于同源. 以下是相对于 http://www.a.com/test/index.html 的同源检测 • h ...
随机推荐
- C++ NFS挂载
挂载NFS 挂载命令 挂载NFS时,常用的命令比如: #将远程目录挂载到本地/home/share目录下 mount -t nfs -o nolock 192.168.1.10:/tmp /home/ ...
- Spring学习(二)三种方式的依赖注入
1.前言 上一篇讲到第一个Spring项目的创建.以及bean的注入.当然.注入的方式一共有三种.本文将展开细说. 1.set注入:本质是通过set方法赋值 1.创建老师类和课程类 1.Course ...
- JAVAWEB使用保存cookie、删除cookie、获取cookie工具类
package com.test; import org.apache.commons.lang.StringUtils; import org.springframework.util.Assert ...
- JAVA加解密之DES
DES加密算法是一种分组密码,以64位为分组对数据加密,它的密钥长度是56位,加密解密用同一算法.DES加密算法是对密钥进行保密,而公开算法,包括加密和解密算法.这样,只有掌握了和发送方相同密钥的人才 ...
- Ubuntu Server 下快速搭建DLNA服务器
购买了一台二手服务器.用来存储重要图片,视频,代码文档等.突发奇想是否可以让电视访问服务器. 经过一番查找,最终确认三星电视支持DLNA协议.大家对minidlna 都比较看好.就试着搭建这个服务器, ...
- VMware15 虚拟机分别设置连接笔记本的WLAN和以太网双网络
VMware15 虚拟机分别设置连接笔记本的WLAN和以太网双网络 虚拟机:window 10 主机: window 10 VVmware有3种网络连接模式:桥接.NAT.主机模式,默认分别对应VMN ...
- 【Java例题】4.2 级数求和2
2. 计算级数之和: y=1/1!*x-1/3!*x^3+1/5!*x^5+...+ (-1)^n/(2n+1)!*x^(2n+1). 这里的"^"表示乘方,"!&quo ...
- Java初学者作业——编写Java程序,输出1~100之间能够同时被3和4整除的最大的五个数字。
返回本章节 返回作业目录 需求说明: 编写Java程序,输出1-100之间能够同时被3和4整除的最大的五个数字. 实现思路: 声明变量count,用于存储满足条件的数据个数,设置初始值为0. 在区间1 ...
- 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
- 【MySQL作业】avg 和 count 函数——美和易思聚合函数应用习题
点击打开所使用到的数据库>>> 1.统计所有商品的平均单价.最高单价与平均单价之差.平均单价与最低单价之差. 最高单价与平均单价之差 = max(unitPrice)-avg(uni ...