JSONP实现跨域

发表于 更新于 分类于 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 1 分钟

前言

默认情况下，通过XHR实现ajax通信时会有一个限制，就是只能访问同一个域中的资源。同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

img

从我自己的网站访问别人网站的内容，就叫跨域。出于安全性考虑，浏览器不允许ajax跨域获取数据。

JSONP跨域

JSONP(JSON with padding，填充式JSON)，本质是利用了 <script src=""></script>标签具有可跨域的特性

实现步骤

  1. 定义一个获取数据后调用的回调函数
  2. 在 src 的 url 后面加上 callback 参数
  3. 服务器返回数据时把 json 数据包裹在 callback 函数里面一起传给客户端

具体实现

利用script标签的src属性

客户端：

<script>
    function fn(data) {
    console.log("我被调用了呢！");
    console.log(data);
}
</script>
<script src="http://127.0.0.1:8888/getData?callback=fn"></script>

服务器端：

服务器端使用了Nodejs和Express框架搭建了一个HTTP服务器。

const express = require("express");
const app = express();
app.listen(8888, () => {
	console.log("server is running at http://127.0.0.1:8888/");
});
app.get("/getData", (req, res) => {
	const fn = req.query.callback;
	let arr = ["tom", "jerry", "spike"];
	res.send(`fn(${JSON.stringify(arr)})`);
	// console.log(...arr);
})
jQuery方式的JSONP

客户端：

<body>
    <input id="btn" type="button" value="发起ajax请求">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        function fn(data) {
            console.log("我被调用了呢！");
        }
        $(function() {
            $("#btn").click(function() {
                $.ajax({
                    url: "http://127.0.0.1:8888/getData",
                    type: "get",
                    dataType: "jsonp",		//dataType必须定义为jsonp
                    jsonpCallback: "fn",	//传递给服务器端的回调函数的名字
                    success: function(res) {
                        console.log("请求成功！");
                        console.log(res);
                    },
                    fail: function(err) {
                        console.log("请求失败：" + err);
                    }
                });
            });
        });
    </script>
</body>