同源策略
同源策略的目的是为了保护用户的隐私数据,防止恶意网站窃取数据。所谓同源策略必须协议相同,域名相同,端口号相同。如果非同源,共会受到行为限制:
- Cookie、LocalStorage和ndexDB无法读取
- DOM无法获得
- AJAX请求不能发送
跨域是什么
当一个资源从与该资源本身所在 的服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求。出于安全原因,浏览器限制从脚本内发起的跨院HTTP请求。例如XMLHTTPRequest和FetchAPI遵循同源策略。这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。
访问的URL地址:网络协议+域名(IP地址)+端口号+资源路径
-
同源:协议相同,域名相同,端口号相同
-
不同源:
- 域名不相同:完全跨域
- 域名相同,端口号不同:跨子域
创建跨域
- link元素
- script元素
- img元素
- iframe元素
JSONP
JSONP是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。利用
script元素实现
网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
可以理解成请求时把自己的函数名也发送过去,服务器端接收到请求,把该响应的数据通过得到函数来调用一下响应回去,这样客户端就能通过函数的参数形式得到服务器端响应过来的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrpit实现跨域</title>
</head>
<body>
</body>
<!--
通过script元素来实现JSONP跨域访问
利用里面的src属性来指定服务器端地址
同时将指定的回调函数名称发送给指定的服务器
-->
<script>
// 定义发送给服务器端的回调函数
//利用回调函数的参数进行接收
function fn(data) {
console.log(data);
}
</script>
<script src="http://127.0.0.1:3000?callback=fn"></script>
</html>
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer(function (req, res) {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
//向发送请求的html页面发送响应
//1.响应数据的格式必须要符合json格式的数据
//2.将响应数据放置在回调函数中才能传递回去
res.end('fn({"msg":"hellw world"})');
});
server.listen(port, hostname, function () {
console.log('服务器开启成功!');
});
$.getJSON()方法
jQuery中的$.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据。
$.getJSON('http://127.0.0.1:3000?callback=?',function(data){
console.log(data)
})
注意:$.getJSON()方法的第一个参数表示url,需要在该参数后面添加“callback=?”。jQUery将"?"自动替换为正确的函数名,以执行回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getJSON实现跨域访问</title>
</head>
<body>
</body>
<script src="../3.JQuery中的Ajax/jquery-3.5.1.js"></script>
<script>
$.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
console.log(data);
})
</script>
</html>
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer(function (req, res) {
var url = req.url;
var urlObj = require('url').parse(url);
var functionName = urlObj.query.split('&')[0].split('=')[1];
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
//向发送请求的html页面发送响应
//1.响应数据的格式必须要符合json格式的数据
//2.将响应数据放置在回调函数中才能传递回去
res.end(functionName + '({"msg":"hellw world"})');
});
server.listen(port, hostname, function () {
console.log('服务器开启成功!');
});
jQuery会自动生成回调函数的名称。