如何通过JSONP解决跨域？-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1037 天，文章内容可能已经过时。

什么是跨域？
什么是JSONP？
JSONP的简单实现
JSONP的优缺点

什么是跨域？

跨域是由浏览器的同源策略造成的，也就是浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议只要有一个不同，都会产生跨域，是浏览器对javascript施加的安全限制。

什么是JSONP？

JSONP为民间提出的一种跨域解决方案，通过客户端的script标签（script标签的src没有跨域的限制）发出的请求方式，原理就是通过添加一个script标签，向服务器请求JSON数据，这样不受同源政策限制。服务器收到请求后，将数据放在一个callback回调函数中传回来。

JSONP的简单实现

前端：

<!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>Document</title>
  </head>
  <body>
    <button id="btn">发送请求</button>
    <script>
      function getJsonpData(data) {
        console.log("获取数据：", data);
      }
      const btn = document.getElementById("btn");
      btn.onclick = function () {
        //创建script标签
        var script = document.createElement("script");
        script.src = "http://localhost:8081/data?callback=getJsonpData";
        document.body.appendChild(script);
        script.onload = function () {
          document.body.removeChild(script);
        };
      };
    </script>
  </body>
</html>

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
27

前端通过创建script标签，在src上传递给后端一个参数（前后端需要定义好这个参数），参数的值就是数据返回前端后需要执行的用于接收数据的函数方法

后端：使用nodejs搭建一个简易的接口

 const express = require('express')
 const app = express()
 const port = 8081

 //路由
 app.get("/data",(req, res)=>{
	 // 1.获取客户端发送过来的回调函数名称
	 let fn = req.query.callback;
	 // 2.要返回给前端的数据
	 const data = {name: "sjx"}
	 // 3.拼接方法名和数据，格式为：方法名(数据)，这样前端接收到数据之后才会去执行这个方法
	 let result = `${fn}(${data})`
	 // 4.响应给客户端的<script>标签进行解析执行
	 res.send(result);
 })

app.listen(port, () => {
	console.log(`Example app listening on port ${port}`)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

JSONP的优缺点

优点：

兼容性好
不受同源策略限制

缺点：

仅支持get请求
不安全
只支持跨域HTTP请求