跨域解决方法——jsonp原理

最新推荐文章于 2023-08-29 20:18:45 发布

tiankai戈

最新推荐文章于 2023-08-29 20:18:45 发布

阅读量496

点赞数 2

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

本文链接：https://blog.csdn.net/m0_51022093/article/details/112112758

版权

跨域解决方法——jsonp原理

一个域名地址的组成：
当协议、子域名、主域名、端口号任意一个不相同时，都算作不同域，不同域之间相互请求资源，就算做“跨域”。由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。
使用jquery的jsonp可以发起跨域请求，下面来探究下他的原理及使用。

首先看下如何使用script src=""来完成一个跨域请求：

普通的ajax请求是会发生跨域问题的，但是img的src，a的href，script的src却可以发起任意网址的请求并接收到响应，于是我们首先利用script的src来完成一个跨域请求。

客户端：

<script>
    function show(weather){
    
        document.write(weather)
    }
    //show('返回的数据');
</script>
<!--用请求参数将函数名传递给服务器。-->
<script src="http://localhost:3000?callback=show"></script>

服务器端：

const http = require("http");
const url = require("url");
http.createServer(
    (req,res)=>{
        var Url = url.parse(req.url,true);
        //接收客户端传过来的名为callback的参数中保存的函数名
        var callback = Url.query.callback;
        var weather="北京 晴";
        //将函数名动态拼接到要返回的函数调用语句中。
        res.write(`${callback}("${weather}")`);//实际想要在客户端执行的函数调用语句。
        res.end();
    }
).listen(3000);

script只能识别js语句，一旦接收到js语句就立即执行。于是在服务器端拼接一条函数调用的js语句，并且提前在客户端定义一个函数，当客户端接收到服务器返回的js语句后就会立即执行。
为了使函数名在客户端可修改，于是用请求参数将函数名从客户端传递给服务器。

动态创建script元素

script是在页面中写死的，只能在页面加载过程中执行一次，如果想每次单击按钮，随时发送请求，可以每次单击按钮时动态创建script元素。

<body>
<button>发送请求</button>

最低0.47元/天解锁文章

tiankai戈

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域解决方法——jsonp原理

跨域解决方法——jsonp原理一个域名地址的组成：当协议、子域名、主域名、端口号任意一个不相同时，都算作不同域，不同域之间相互请求资源，就算做“跨域”。由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题。使用jquery的jsonp可以发起跨域请求，下面来探究下他的原理及使用。首先看下如何使用script src=""来完成一个跨域请求：普通的ajax请求是会发生跨域问题的，但是img的src，a的href，script的src却可以发起任意网址的请求并接收到响应，于是我们首先利用s
复制链接

扫一扫

专栏目录