当前位置：首页 > news >正文

JavaScript异步编程——04-同源和跨域

news 2026/5/19 17:59:10

同源和跨域

同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

跨域问题的解决方案

从我自己的网站访问别人网站的内容，就叫跨域。

出于安全性考虑，浏览器不允许ajax跨域获取数据。

iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。
JSONP：script 标签的 src 属性传递数据。

JSONP

JSONP(JSON with Padding)：带补丁的 json，本质是利用了 <script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。

我们知道， html标签的 src 属性是支持跨域的：

     <img src="http://img.smyhvae.com/2016040101.jpg" alt="">

jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><!-- jsonp 就是 利用 src，实现的跨域 用的是 script标签 --><script type="text/javascript"  src='http://192.168.141.137/2018-02-28/myData.php'></script></body></html>

上方那一行的代码，意思是：刷新A服务器上的index页面后，会去请求 B 服务器上的 myData.php 这个页面。而且请求的方式是 get 请求。

但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。

具体实现步骤：

需要首先声明的是，jsonp 只能通过 GET 方式进行请求。

（1）A客户端的代码：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html><script type="text/javascript">// 定义 eatFood()方法function fn(data) {console.log('我被调用了哦');console.log(data);}</script><!-- 使用 script标签 发送了 get请求 去到了一个 php页面 --><script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>

我们来分析上方代码中的最后一行的那个url：A 客户端请求的是 B服务器上的 01.php页面。url里有个callback1=fn，意思是：callback1是A和B 之间的约定，约定后，将执行方法 fn。

其实，fn方法已经在最后一行代码中执行了。只不过，fn方法里的data数据，是从 B 服务器中获取的。

（2）B服务器端的代码：

 <?php$mycallBack = $_GET['callback1'];$arr = array("zhangsan","lisi","zhaoliu");echo $mycallBack."(".json_encode($arr).")";    //字符串拼接?>

代码解释：

第一行的callback1 是A和B之间的约定，二者必须一致。

echo语句中输出的内容，即要返回给A客户端的内容，此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。

json_encode指的是，将php对象转化为 json。

刷新A页面，输出结果为：

     mycallBack(["zhangsan","lisi","zhaoliu"])

jQuery 中的 JSONP

我们知道，jQuery 中发送 Ajax 请求，格式是：

         $("#btn").click(function(){$.ajax({url:"./data.php?callback1=fn",dataType:"jsonp",type:"get",//jsonp:"callback1",   //传递给B服务器的回调函数的名字（默认为 callback）//jsonCallBack:"fn"    //自定义的函数名称。默认为 jQuery 自动生成的随机函数名success:function(data){alert(data);//$("#showInfo").html(data);},error:function(e){console.log(e);}});});

那如果数据是 JSONP，上方代码则改为：

         $("#btn").click(function(){$.ajax({url:"./data.php?fn",dataType:"text",type:"get",success:function(data){alert(data);//$("#showInfo").html(data);},error:function(e){console.log(e);}});});

参考链接

参考链接：https://www.cnblogs.com/2050/p/3191744.html

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

JavaScript异步编程——04-同源和跨域

同源和跨域

同源

跨域问题的解决方案

JSONP

jQuery 中的 JSONP

参考链接

相关文章：

JavaScript异步编程——04-同源和跨域

出差——蓝桥杯十三届2022国赛大学B组真题

UE5（射线检测）学习笔记

语音识别的基本概念

OpenCV Radon变换探测直线（拉东变换）

六、Redis五种常用数据结构-zset

FPGA第一篇，FPGA现场可编程门阵列，从0开始掌握可编程硬件开发（FPGA入门指南）

C#实现简单音乐文件解析播放——Windows程序设计作业2

Python数据爬取超简单入门

Dreamweaver 2021 for Mac 激活版：网页设计工具

【Git】Git学习-15：分支简介和基本操作

浏览器提示网站“不安全”原因及解决方法

Jmeter详细学习思路和教程

钉钉开放平台创建企业内部H5微应用或者小程序

Linux中每当执行‘mount’命令(或其他命令)时，自动激活执行脚本：输入密码，才可以执行mount

【网络协议】----IPv6协议报文、地址分类

Llama改进之——SwiGLU激活函数

在数据分析中所需要运用到的概率论知识

韩顺平0基础学Java——第6天

react18子组件设置接收默认值和值类型验证

别再只会用MI了！深入对比PLV、MVL、MI：在Python中如何为你的EEG数据选择最佳跨频耦合算法

对比直接使用厂商API体验Taotoken聚合调用在延迟上的优化感受

企业无线组网避坑指南：AP发现AC失败？从DHCP Option 43配置到防火墙策略的排查清单

播客内容找不到源头？Perplexity深度索引机制解析，7类冷门播客源自动唤醒术

拆解新客裂变与裂变率：诺云用户可直接套用的获客增长指南

ComfyUI Segment Anything：零门槛实现智能图像分割的完整指南

二维码坏了别着急扔！3步教你用QRazyBox免费修复损坏的二维码

对比自行维护多个API与使用Taotoken聚合平台在运维复杂度上的差异

通达信缠论智能分析插件：5分钟实现专业K线结构可视化

透明计费如何帮助精准预测与控制AI功能月度开支