前言
昨天晚上在B站看了关于跨域的半节课,为什么是半节呢,因为就看到讲完jsonp实现跨域,再往后的方法我觉得我可能就看不懂了,所以先掌握这些啦,那么现在来总结一下昨天的收获:
什么是跨域呢?
在真实项目中,前端服务器往往被拆分为web服务器、data服务器、图片服务器……等等。web服务器用来给存储静态资源,即展示给用户的页面,而data服务器则会负责网站的业务逻辑和数据分析等工作,这两个服务器往往会有不同的域名或者端口,那么如何将后端业务逻辑和数据请求到前端页面中呢?这时候就需要“跨域”来帮助了。
跨域又叫非同源策略请求,当两个地址协议、域名、端口号都相同时,叫做同源,这三者任何一个不同时,都叫做非同源,也就是跨域。另外,我们在自己的网站中调用第三方开源的数据接口也是跨域。
JSONP方法实现跨域
关于script标签
我们在html文件中使用script标签引用外部js文件时,需要用到script标签的src属性,例如使用jQuery时,我们可以引入一个外部的jQuery地址,这个地址和本地的网页是非同源的,之所以会引用成功,就是因为script标签不存在跨域请求的限制。同样不受跨域请求限制的标签还有img、link、iframe等。
关于jQuery
jQuery中提供了JSONP的处理方式,引入jQuery即可使用同源策略的Ajax实现非同源策略请求。
JSONP实现跨域的原理及步骤
- 利用了script标签的src属性没有跨域请求限制这一点,通过它向服务器端发送请求,同时把本地的一个回调函数传给服务器。
- 服务器接收客户端的请求,准备好json格式的数据,就给客户端返回数据(以字符串的形式返回)。
- 客户端把接收回来的字符串变成js表达式,以全局函数的方式来执行,即可得到传回的数据。
简单实现一下
1、html中引入jQuery和用来发送请求的js文件:
<!-- 1_jsonp.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨域</title>
</head>
<body>
<!-- 引入jquery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./1_jsonp.js"></script>
</body>
</html>
2、利用jsonp方法请求数据
// 1_jsonp.js
// jQuery内部封装的jsonp的请求数据的方法
$.ajax({
// 要请求的接口地址和数据
url: 'http://127.0.0.1:8001/list',
// 请求方式--默认为get
method: 'get',
// *执行JSONP请求
dataType: 'jsonp',
// 成功打印res
success: res => {
console.log(res);
}
});
3、搭建简单后台 接收请求 发送数据
// serverJSONP.js
// 基于node.js和express搭建jsonp的后台服务
let express = require('express'),
app = express();
// 监听8001端口并且创建服务
// _ => {} 不传参时下划线占位
app.listen(8001, _ => {
console.log('OK!');
});
// 服务器接收/list请求并做出响应
app.get('/list', (req, res) => {
// req对象中存储客户端发送请求的信息
// req.query中储存所有‘?’问号传参的信息
// 解构赋值的方法传给callback函数,并且穿一个默认值Function.prototype(匿名空函数)(解构赋值还不了解)
let {
callback = Function.prototype
} = req.query;
// 给客户端返回的数据
let data = {
code: 0,
message: '小静'
};
// res响应对象中的send方法给客户端返回数据
res.send(`${callback}(${JSON.stringify(data)})`);
});
4、结果演示
小结和感想:
终于我也能对跨域说上来点东西了,学习知识真让人开心。最近寝室的同学都在准备考研了,而我1号那天鬼使神差投了字节的实习内推,竟然还过了简历评估,准备了一个星期去面试结果还是一塌糊涂,从此在考研还是工作的路口坚定选择了工作,立志今年要找个好的实习。又过了快一周的学习,发现自己前端的基础不牢固,网络了解甚少,算法和数据结构也得尽快补起来,可真难啊。
哦对了,昨天学跨域看的视频课程来源:https://www.bilibili.com/video/BV1SE411r7yk