jsonp实现跨域的原理

最新推荐文章于 2023-11-09 16:24:46 发布

小丑鱼20210316

最新推荐文章于 2023-11-09 16:24:46 发布

阅读量138

点赞数 1

分类专栏：跨域 js 文章标签： js ajax跨域问题

本文链接：https://blog.csdn.net/weixin_38331749/article/details/115272590

版权

jsonp 跨域 script标签全局方法 JSONP实现

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

提示：加载图片、css、js都可以无视同源策略

一、jsonp实现原理

jsonp一般都选用script标签，script标签加载的js是没有跨域限制的，因为加载的是一个脚本，不是一个ajax请求。script所请求到的内容会直接当作js来执行，返回一段js脚本。

二、简单示例

1.html

代码如下（示例）：

<!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>
    <script>
      window.jsonpFun = function (data) {
        console.log(data);
      };
    </script>
    <script src="http://localhost:8001/dom1.js"></script>
  </body>
</html>

2.js文件中简单返回的数据

代码如下（示例）：

jsonpFun({
  name:'小米'
})

结果

在这里插入图片描述

三、总结

注意：html的jsonpFun是全局方法，而且需和js文件中调用的方法名称一致。

小丑鱼20210316

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp实现跨域的原理

提示：加载图片、css、js都可以无视同源策略一、jsonp实现原理jsonp一般都选用script标签，script标签加载的js是没有跨域限制的，因为加载的是一个脚本，不是一个ajax请求。script所请求到的内容会直接当作js来执行，返回一段js脚本。二、简单示例1.html代码如下（示例）：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
复制链接

扫一扫

专栏目录