jsonp解决跨域问题（简单易懂）

最新推荐文章于 2024-05-15 23:10:23 发布

weixin_流年

最新推荐文章于 2024-05-15 23:10:23 发布

阅读量6.6k

点赞数 5

分类专栏： javascript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_40967353/article/details/107935984

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

在日常的项目开发中，前端和后台是要经常交互的，有时候前端去请求后端的接口时，会出现跨域这个问题，解决跨域的方法有很多，本文主要讲解下如何使用jsonp来解决跨域问题。

解决问题之前，我们首先要明白一个问题，什么是跨域？为什么会出现跨域？

其实跨域的出现主要是因为浏览器的同源策略导致的，那什么又是浏览器的同源策略呢。浏览器的同源策略主要是为了保证用户信息的安全而出现。那什么情况下属于同源，什么情况下是不同源呢，看下图

看到上面图片上的解释之后，我相信很多人对同源应该已经明白了吧。

其实jsonp解决跨域问题的本质就是利用script标签的src属性来进行，由于script标签的src属性不受跨域的现在，所以我们可以将我们要请求的服务器的地址及相关参数作为src的值来进行传输，然后再由后台进行配合就可以实现跨域。

步骤如下：

a 将不同源的服务器端请求地址写在script标签的src属性中

b 服务器端响应的必须是一个函数的调用，真正要发送给客户端的数据要作为函数调用的参数

c 在客户端全局作用域下定义函数fn

d 在fn函数内部对服务器返回的数据进行处理

1 最简单的jsonp实例

比如现在我们的服务器地址端口号为3001

var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

//路由配置
app.get("/test",(req,res)=>{
  const result = 'fn()'
  res.send(result)
})

app.use(function(req, res, next) {
  next(createError(404));
});

app.listen(3001)
module.exports = app;

我们在页面中请求的地址为/test，如果我们要使用jsonp解决的话前端代码可以这么写

<body>
    <script>
        function fn(){
            console.log("ok函数调用了")
        }
    </script>
    <script src="http://localhost:3001/test"></script>
</body>

需要注意的是，我们要先在全局声明一个fn的全局函数，作为后端返回给我们函数的调用，如果这个函数不是全局的话，我们在调用的时候会报错，而且这个一定要在前面。

2 通过触发事件来进行jsonp跨域比如页面中有个按钮，现在需要点击按钮发送跨域请求实现代码如下

此种场景的关键点是动态创建script标签，然后设置src属性即可

<body>

    <button id="btn">点击发送请求</button>

    <script>
        function fn() {
            console.log("ok函数调用了")
        }

        var btn = document.getElementById("btn");
        
        btn.onclick = function () {

            var script = document.createElement("script");

            script.src = 'http://localhost:3001/test';

            document.body.appendChild(script);

            script.onload = function () {
                document.body.removeChild(script)
            }

        }
    </script>
    <!-- <script src="http://localhost:3001/test"></script> -->

</body>

3 客户端需要将函数名称传递到服务器可以如下实现：

前端代码

<body>
    <script>
        function fn(data) {
            console.log("客户端的函数调用了")
            console.log(data)
        }
        
    </script>
    <script src="http://localhost:3001/test?callback=fn"></script>
</body>

服务器端代码

//路由配置
app.get("/test",(req,res)=>{
  var fnName = req.query.callback;
  var result = fnName + '({name:"zhangsan"})';
  res.send(result);
})

页面输出

以上就是前端利用jsonp实现跨域的方法，需要注意的是利用该方法实现是需要前端和后端配合的。

weixin_流年

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsonp解决跨域问题（简单易懂）

在日常的项目开发中，前端和后台是要经常交互的，有时候前端去请求后端的接口时，会出现跨域这个问题，解决跨域的方法有很多，本文主要讲解下如何使用jsonp来解决跨域问题。解决问题之前，我们首先要明白一个问题，什么是跨域？为什么会出现跨域？其实跨域的出现主要是因为浏览器的同源策略导致的，那什么又是浏览器的同源策略呢。浏览器的同源策略主要是为了保证用户信息的安全而出现。那什么情况下属于同源，什么情况下是不同源呢，看下图看到上面图片上的解释之后，我相信很多人对同源应该已经明白了吧。其实jsonp解
复制链接

扫一扫