js跨域访问的超简单方法

最新推荐文章于 2022-05-16 10:11:42 发布

全脂主妇

最新推荐文章于 2022-05-16 10:11:42 发布

阅读量883

点赞数

CC 4.0 BY-SA版权

分类专栏： http jquery 文章标签： ajax跨域问题 json javascript ajax

本文链接：https://blog.youkuaiyun.com/lihuifen2011/article/details/119884192

jquery 同时被 2 个专栏收录

5 篇文章

订阅专栏

http

3 篇文章

订阅专栏

本文通过一个示例介绍了JSONP（JSON with Padding）的工作原理，展示了如何利用JSONP解决JavaScript的同源策略限制，实现跨域数据获取。客户端定义回调函数getjson，服务端返回一段调用该函数的JavaScript，从而将数据传递给客户端。JSONP主要适用于GET请求，依赖于script标签的跨域特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上例子

客户端js代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域test</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
</body>
<script>
//回调函数
function getjson(data){
console.log(data.name);
}
</script>
<script src="https://域名/jsonTest.html?cb=getjson"></script>
</html>

服务端jsonTest.html代码：

getjson(
{
"name":"this is a cross response data!"
}
)

注意：

1.cb是固定参数名，是callback的缩写。该方法需满足两个条件才可顺利执行：

（1）客户端回调函数方法名与cb的值一致才能被顺利回调。

（2）服务端声明的函数名也必须与回调函数名保持一致。

2.使用jsonp解决跨域(仅适用于GET请求) 实现原理：

script标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。所以 JSONP 的理念就是，我和服务端约定好一个函数名，当我请求文件的时候，服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数，并且将数据当做参数传入。非常巧合的一点（其实并不是），JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。