跨域访问

说到跨域访问就要谈到浏览器的同源策略，所谓同源指的就是协议相同、域名相同、端口号相同，三个条件必须全部匹配，否则就会收到限制，例如：

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 无法获得
  • AJAX 请求不能发送

而互联网默认原则就是同源策略，也就是说不允许跨域访问。

常见的跨域可以通过标签元素实现，例如link、script、img、iframe等标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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。

image-20200905151109220

JSONP

不过这篇文章的目的是为了介绍JSONP进行跨域。如何利用JSONP实现跨域？

通过动态创建 script 标签，通过 script 标签的 src 请求没有域限制来获取资源

例如在 html 页面中，将 script 标签地址改为后端接口。

网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同原政策限制；服务器收到请求后，将数据放在一个指定名的回调函数里传回来。

json才是目的，jsonp只是手段

原生JS实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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}/`);
});

image-20200905152555018

image-20200822192837473

jQuery的getJSON方法

JQuery中的$.getjson()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据

1
2
3
$.getJSON('http://127.0.0.1:3000?callback=?',function(){
    console.log(data);
})

调用的函数名jQuery会自动生成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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会自动生成回调函数的名称。

image-20200905161337135