说到跨域访问就要谈到浏览器的同源策略,所谓同源指的就是协议相同、域名相同、端口号相同,三个条件必须全部匹配,否则就会收到限制,例如:
而互联网默认原则就是同源策略,也就是说不允许跨域访问。
常见的跨域可以通过标签元素实现,例如link
、script
、img
、iframe
等标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
<script>
console.log($);
</script>
</body>
</html>
例如如上代码,通过bootcdn的连接还是可以引用到jQuery。
不过这篇文章的目的是为了介绍JSONP进行跨域。如何利用JSONP实现跨域?
通过动态创建 script
标签,通过 script
标签的 src
请求没有域限制来获取资源
例如在 html 页面中,将 script
标签地址改为后端接口。
网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同原政策限制;服务器收到请求后,将数据放在一个指定名的回调函数里传回来。
json才是目的,jsonp只是手段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
通过script元素实现JSONP跨域访问
利用script元素的src属性制定服务器端地址
同时将制定的回调函数名称发送指定服务器
-->
<script>
function fn(data) {
console.log(data);
console.log(data.msg);
}
</script>
<!-- 函数的声明要放在请求之上 -->
<script src="http://127.0.0.1:3000?callback=fn"></script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
// 响应数据
// 响应的数据必须是JSON格式
// 响应的数据作为调用的函数的参数传递
res.end('fn({"msg":"Hello world"})');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
JQuery中的$.getjson()
方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据
$.getJSON('http://127.0.0.1:3000?callback=?',function(){
console.log(data);
})
调用的函数名jQuery会自动生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON('http://127.0.0.1:3000?callback=?', function (data) {
console.log(data);
})
</script>
</body>
</html>
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
var urlObj = require("url").parse(req.url);
var functionName = urlObj.query.split("&")[0].split("=")[1];
console.log(functionName);
res.end(`${functionName}({"msg":"Hello world"})`);
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
jQuery会自动生成回调函数的名称。