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

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

news 2025/12/16 14:43:22

同源和跨域

同源

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

跨域问题的解决方案

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

出于安全性考虑，浏览器不允许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-同源和跨域

同源和跨域 同源 同源策略是浏览器的一种安全策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口完全相同。 跨域问题的解决方案 从我自己的网站访问别人网站的内容&#xff0c;就叫跨域。 出于安全性考虑&#xff0c;浏览器不允许ajax跨域获取…...

编程日记 2024/5/9 12:12:54

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

问题分析 该题属于枚举类型&#xff0c;遍历所有情况选出符合条件的即可。因为只需要派两个人&#xff0c;因此采用两层循环遍历每一种情况。 AC_Code #include <bits/stdc.h> using namespace std; string str;//选择的两人 bool ok(){if(str.find("A")!-1…...

编程日记 2024/5/9 12:11:53

UE5（射线检测）学习笔记

这一篇会讲解射线检测点击事件、离开悬停、进入悬停事件的检测&#xff0c;以及关闭射线检测的事件&#xff0c;和射线检测蓝图的基础讲解。 创建一个简单的第三人称模板 创建一个射线检测的文件夹RadiationInspection&#xff0c;并且右键蓝图-场景组件-命名为BPC_Radiation…...

编程日记 2024/5/9 12:10:51

语音识别的基本概念

语音识别的基本概念​​​​​​​ ​​​​​​​ 言语是一种复杂的现象。人们很少了解它是如何产生和感知的。天真的想法常常是语音是由单词构成的&#xff0c;而每个单词又由音素组成。不幸的是&#xff0c;现实却大不相同。语音是一个动态过程&#xff0c;没有明确区分的…...

编程日记 2024/5/9 12:09:50

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

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 Radon变换可以将原始图像中直线特征的处理问题转化为变换域图像中对应点特征的处理问题，其中对应特征点的横坐标表示原始图像的旋转角度，一般来讲原始图像中的噪声不会分布在直线的特征上。因此，Radon变换在探测…...

编程日记 2024/5/9 12:06:46

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

zset是Redis的有序集合数据类型&#xff0c;但是其和set一样是不能重复的。但是相比于set其又是有序的。set的每个数据都有一个double类型的分数&#xff0c;zset正是根据这个分数来进行数据间的排序从小到大。有序集合中的元素是唯一的&#xff0c;但是分数(score)是可以重复的…...

编程日记 2024/5/9 12:00:40

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

简介&#xff1a;FPGA全称Field-Programmable Gate Array&#xff0c;是一种可编程逻辑器件&#xff0c;它通过可编程的逻辑单元和可编程的连接网络实现了灵活的硬件实现。与固定功能的集成电路&#xff08;ASIC&#xff09;相比&#xff0c;FPGA具有更高的灵活性和可重新配置性…...

编程日记 2024/5/9 11:58:36

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

1. 作业内容 编写一个C#程序&#xff0c;要求实现常见音乐文件的播放功能&#xff0c;具体要求如下&#xff1a;     1). 播放MP3文件&#xff1a; 程序应能够读取MP3文件&#xff0c;并播放其中的音频。     2). 播放OGG文件&#xff1a; 应能够播放ogg文件。     …...

编程日记 2024/5/9 11:56:34

Python数据爬取超简单入门

## 什么是网络爬虫&#xff1f; 网络爬虫是一种自动浏览器程序&#xff0c;能够自动地从互联网获取数据。爬虫的主要任务是访问网页&#xff0c;分析网页内容&#xff0c;然后提取所需的信息。爬虫广泛应用于数据收集、数据分析、网页内容监控等领域。 ## 爬虫的基本步骤 1.…...

编程日记 2024/5/9 11:50:28

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

在追求卓越的网页设计道路上&#xff0c;Dreamweaver 2021 for Mac无疑是您的梦幻之选。这款专为Mac用户打造的网页设计工具&#xff0c;集强大的功能与出色的用户体验于一身。 Dreamweaver 2021支持多种网页标准和技术&#xff0c;让您能够轻松创建符合现代网页设计的作品。其…...

编程日记 2024/5/9 11:47:23

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

学习视频链接&#xff1a;【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 git bran…...

编程日记 2024/5/9 11:45:21

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

是否经常会遇到访问的网站被浏览器提示访问不安全&#xff1f;那么&#xff0c;浏览器提示网站不安全通常有哪些原因又该如何处理这种不安全提醒&#xff0c;以下总结了几个原因及相应的处理办法&#xff1a; 一、网站管理者原因排查及处理办法&#xff1a; 1、网站没有部署S…...

编程日记 2024/5/9 11:42:16

Jmeter详细学习思路和教程

目录 1、JMeter环境准备 1.1、介绍 1.2、与LoadRunner比较 1.3、前提条件 1.4、安装配置 2、JMeter脚本 2.1、测试计划 2.2、线程组 2.3、Sampler 2.4、HTTP请求 2.5、查看结果树 2.6、HTTP Cookie管理器 2.7、HTTP信息头管理器 2.8、响应断言 2.9、参数化 3、JM…...

编程日记 2024/5/9 11:41:14

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

前言&#xff1a; 在当今企业数字化转型的浪潮中&#xff0c;创建企业内部H5微应用或小程序已成为提升工作效率和促进内部沟通的重要举措。发话不多说本文将介绍如何利用钉钉平台快速创建这些应用&#xff0c;让企业内部的工作更加便捷高效。 步骤 1.在浏览器打开链接…...

编程日记 2024/5/9 11:38:11

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

要实现这个功能&#xff0c;可以通过创建一个自定义的mount命令的包装器&#xff08;wrapper&#xff09;来完成。这个包装器脚本会首先提示用户输入密码&#xff0c;如果密码正确&#xff0c;则执行实际的mount命令。以下是创建这样一个包装器的步骤&#xff1a; 创建一个名为…...

编程日记 2024/5/9 11:37:09

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

【网络协议】----IPv6协议简介 【网络协议】----IPv6协议简介IPv6特点IPv4 和 IPv6报文结构IPv6报文格式-拓展报头 IPv6地址分类IPv6地址表示IPv6单播地址可聚合全球单播地址链路本地地址唯一本地地址特殊地址补充 接口标识&#xff08;主机位&#xff09;生成方法通过EUI-64规…...

编程日记 2024/5/9 11:36:07

Llama改进之——SwiGLU激活函数

引言 今天介绍LLAMA模型引入的关于激活函数的改进——SwiGLU1&#xff0c;该激活函数取得了不错的效果&#xff0c;得到了广泛地应用。 SwiGLU是GLU的一种变体&#xff0c;其中包含了GLU和Swish激活函数。 GLU GLU(Gated Linear Units,门控线性单元)2引入了两个不同的线性层…...

编程日记 2024/5/9 11:34:05

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

数据分析 前言一、总体二、样本三、统计抽样抽取的基本准则 四、随机抽样抽签法随机数法 五、分层抽样六、整群抽样七、系统抽样八、统计参数常用的分布函数参数 九、样本统计量十、样本均值和样本方差十一、描述样本集中位置的统计量样本均值样本中位数样本众数 十二、描述样本…...

编程日记 2024/5/9 11:31:00

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

p87-p109 运算符&#xff08;第四章&#xff09; 四种进制 二进制用0b或0B开头 十进制略 八进制用0开头 十六进制0x或0X开头&#xff0c;其中的A—F不区分大小写 10转2&#xff1a;将这个数不断除以2&#xff0c;直到商为0&#xff0c;然后把每步得到的余数倒过来&#…...

编程日记 2024/5/9 11:29:59

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

父组件传值 import ChildCom from ./components/ChildCom export default function Person {return(<div><ChildCom name"alan-ben" age{18} score{[98, 97, 100]} /></div>) } 子组件接收并验证类型 import React from react import PropTypes…...

编程日记 2024/5/9 11:27:56

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/12/16 5:34:37

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/12/16 11:33:51

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/11/22 20:41:02

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/4 2:37:03

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2025/12/16 9:38:39

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/12/12 7:51:48

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2025/12/13 0:57:12

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/12/5 21:11:55

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

编程新知 2025/12/10 8:37:24