JSONP跨域

news2024/11/13 14:58:13

1 概述

定义

json存在的意义:

不同类型的语言,都能识别json

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的

image-20240731100716457

  • 跨域:浏览器A服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。
  • 同源策略:同一个请求协议(如:Http或Https)、同一个Ip、同一个端口,3个全部相同,即为同源。

2 demo

后端

<?php
    $arr=["name"=>"woniu","age"=>20];
    //把数组转成json字符串,
    $json = json_encode($arr);
    //输出
    echo $json;
?>

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <h1>前端</h1>
    <script>
        $.getJSON("后端的地址",function(data){
            alert(JSON.stringify(data));
        })
    </script>
</body>
</html>

用户访问

192.168.190.134/woniu/demo31.html

查看控制台:

image-20240731102921872

解决方案

  • JSONP
  • CORS

3 JSONP

image-20240731105929545

image-20240731112347075

后端

<?php
    $arr=["name"=>"woniu","age"=>20];
    //把数组转成json字符串,
    $json = json_encode($arr);
	$callback = $_GET["callback"]; // 函数对象, 字符串

    //输出
    ///echo $json;
	echo "$callback('$json')";
?>

前端

# 方法一:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>前端</h1>
    <script>
        // function xxx(data){
        //     // 后端返回的data json
        //     console.log("999");
        // }
    </script>
    <script>
        $.getJSON("http://192.168.190.133/wh069/demo31.php?callback=?",function(data){
            alert(JSON.stringify(data));
            // alert(JSON.parse(data));  // 反序列化 
            // json:序列化和反序列化
        })
    </script>
</body>
</html>

# 方法二:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>前端</h1>
    <script>
        function xxx(data){
            // 后端返回的data json
            alert(JSON.stringify(data));
        }
    </script>
    <script src="http://192.168.190.133/wh069/demo31.php?callback=xxx">
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1965849.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MCU单片机GPIO初始化该按什么顺序配置?为什么初始化时有电平跳变?

GPIO初始化时有时钟配置、模式配置、输出配置、复用配置&#xff0c;那么在编写初始化代码时&#xff0c;到底该按什么顺序执行呢&#xff1f;如果顺序不当那初始化过程可能会出现短暂的电平跳变。 第一步&#xff0c;初始化MCU外设时&#xff0c;一般都需要先打开对应寄存器的…

Multi-Head Mixture-of-Experts笔记

这篇文章&#xff08;还是校友&#xff09;&#xff0c;也是和dot product本身没什么关系。讲一讲核心思想 文章在背景中介绍了Sparse Mixture of Experts&#xff0c;因为MH-MoE也是在S-MoE基础上做的&#xff0c;个人感觉其实变动并不大&#xff0c;但我觉得写的很清楚&…

优化 Spring Boot 项目启动速度:高效管理大量 Bean 注入

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119@qq.com] 📱个人微信:15279484656 🌐个人导航网站:www.forff.top 💡座右铭:总有人要赢。为什么不能是我呢? 专栏导…

卷积神经网络 - 卷积运算篇

序言 在探索深度学习尤其是计算机视觉领域的奥秘时&#xff0c;卷积神经网络&#xff08; Convolutional Neural Networks, CNNs \text{Convolutional Neural Networks, CNNs} Convolutional Neural Networks, CNNs&#xff09;无疑占据了核心地位。而卷积运算&#xff0c;作为…

书生大模型基础岛-第二关:8G 显存玩转书生大模型 Demo

1.来源 https://github.com/InternLM/Tutorial/blob/camp3/docs/L1/Demo/task.md 2.过程 在 /root/share/pre_envs 中配置好了预置环境 icamp3_demo conda activate /root/share/pre_envs/icamp3_demo创建一个目录&#xff0c;用于存放我们的代码。并创建一个 cli_demo.py …

【JVM基础09】——垃圾回收-对象什么时候可以被垃圾回收器回收?

目录 1- 引言&#xff1a;垃圾回收1-1 什么是垃圾回收&#xff1f;(What)1-2 为什么要进行垃圾回收&#xff1f;(Why) 2- ⭐核心&#xff1a;对象什么时候可以被垃圾回收器回收&#xff1f;(How)2-1 对象什么时候可以被回收&#xff1f;2-2 引用计数法引用计数法存在的问题&…

误删文件大救星!4款必备数据恢复软件,轻松恢复各类文档照片

在数字化的时代信息就是王道&#xff0c;很多时候丢失了信息就以为着丢失了资源。这时候就需要失易得数据恢复这样的数据恢复工具来帮我们守护信息的安全。 1.福昕数据恢复 https://www.pdf365.cn/foxit-restore/链接直达&#xff1a;https://www.pdf365.cn/foxit-restore/ …

设计模式-创建型模式-单例设计模式

创建型模式提供创建对象的机制&#xff0c;能够提升已有代码的灵活性和复用性&#xff1b; 常用的有&#xff1a;单例模式、工厂模式、建造设模式&#xff1b;不常用的&#xff1a;原型模式&#xff1b; 1.概述 单例模式是最简单的模式之一&#xff0c;其保证了某个类在运行期…

Ubuntu22 下 Docker 安装,VS Code Docker配置

1. Docker 安装 1. 卸载旧版本的 Docker&#xff08;如果有&#xff09;&#xff1a; sudo apt-get remove docker docker-engine docker.io containerd runc 2. 更新软件包&#xff1a; sudo apt-get update sudo apt-get upgrade 3. 安装 Docker 依赖&#xff1a; sudo apt-…

苹果手机通讯录恢复教程?3招速成指南

随着科技的不断进步&#xff0c;手机丢失、系统崩溃等意外情况也时有发生&#xff0c;一旦这些情况发生&#xff0c;我们宝贵的通讯录资料很可能会付诸东流。对此&#xff0c;本文为广大苹果手机用户提供一份简洁明了的通讯录恢复教程&#xff0c;让你轻松掌握苹果手机通讯录恢…

接了一个2000块的小活,大家进来看看值不值,附源码

如题&#xff0c;上周的一天&#xff0c;朋友圈的一个旧友找到了我&#xff0c;说让我帮他开发一个小工具&#xff0c;虽然活不大&#xff0c;但没个几年的全栈经验还不一定能接下来&#xff0c;因为麻雀虽小&#xff0c;涉及的内容可不少&#xff1a; 需求分析 原型设计 详细…

Halcon 边缘提取(像素)

传统提取边缘的方法即通过图像中的明暗进行过滤&#xff0c;其左右就是根据明暗区域找到像素边界。从数学角度&#xff0c;滤波器决定图像剃度&#xff0c;该图像剃度通常作为边缘幅度和边缘方法返回。通过选取所有边缘幅值高的像素点&#xff0c;可以提取区域间的轮廓。另一个…

G1简介、各种GC总结

概述 G1首次出现是在JDK 6u14版本里作为体验版&#xff0c;JDK 7u4版本被正式推出&#xff0c;JDK 9中被设置为默认垃圾收集器&#xff08;参考JEP 248&#xff09;。 G1全称是Garbage First&#xff0c;目标&#xff1a;延迟可控的情况下&#xff0c;尽可能高的吞吐量。一款…

怎么使用Element ui来做一个前端登录页面

找到Layout 布局 他通过基础的 24 分栏&#xff0c;迅速简便地创建布局。 找一个对齐方式 这个就不错,找到对应的代码 这个 复制进入idea 引入我们的图片和文字 我这里图片有点问题 然后我再添加一条分割线 加入表单校验 把里面的代码同上加入idea 结果 对表单内容进行调整 …

CAPL使用结构体的方式组装一条DoIP车辆声明消息

如果你参加过我的《CAPL编程系统性课程》,你就结构体类型天然就能表示报文结构,用结构体表示报文虽然麻烦,但灵活度更高。 我们今天试着用结构体类型表示DoIP车辆声明消息的DoIP报头,然后组装一条DoIP消息发送出去。 DoIP消息结构如下: DoIP车辆声明消息结构如下: /**…

等保测评练习卷22

等级保护初级测评师试题22 姓名&#xff1a; 成绩&#xff1a; 一、判断题&#xff08;10110分&#xff09; 1. 在应用系统测试中&#xff0c;如果审计是一个独立的功能&#xff0c;那么应用系统应对审计进程进行保…

python反序列化

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…

Blackcat V2.2付费会员制WordPress资源站主题

Blackcat-付费会员制WordPress资源站主题&#xff0c;该主题是基于简约实用的主题选项框架 Codestar Framework 进行开发的功能强大的付费会员制主题&#xff0c;该主题尤其适合用于搭建付费下载资源网站&#xff0c;比如素材站、软件站、视频教程站等付费资源下载网站。 集成…

unity2D游戏开发17战斗精灵

导入 将PlayerFight32x32.png拖Player文件夹进去 设置属性 创建动画剪辑 选中前四帧,右键Create|Animation,将动画命名为player-ire-east 其他几个动画也创建好后,将其拖到Animations|Animations文件夹 选中PlayerController,再点击Animator 创建新的Blend Tree Graph,并重…