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

【Ajax】跨域

news 2025/11/11 6:15:07

文章目录

1 同源策略
- 1.1 index.html
- 1.2 server.js
2 如何解决跨域
- 2.1 JSONP
- - 2.1.1 JSONP 原理
  - 2.1.2 JSONP 实践
  - 2.1.3 jQuery 中的 JSONP
- 2.2 CORS
- - 2.2.1 CORS实践
3 server.js

1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

1.1 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title>
</head>
<body><h1>尚硅谷</h1><button>点击获取用户数据</button><script>const btn = document.querySelector('button');btn.onclick = function(){const x = new XMLHttpRequest();//这里因为是满足同源策略的, 所以 url 可以简写x.open("GET",'/data');//发送x.send();//x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){console.log(x.response);}}}}</script>
</body>
</html>

1.2 server.js

const express = require('express');const app = express();app.get('/home', (request, response)=>{//响应一个页面response.sendFile(__dirname + '/index.html');
});app.get('/data', (request, response)=>{response.send('用户数据');
});app.listen(9000, ()=>{console.log("服务已经启动...");
});

2 如何解决跨域

2.1 JSONP

JSONP 是什么？
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，只支持 get 请求。
JSONP 怎么工作的？
在网页中，有一些标签天生具有跨域能力，比如：img、link、iframe、script，JSONP 就是利用 script 标签的跨域能力来发送请求的。

JSONP 的使用

动态的创建一个 script 标签

var script = document.createElement("script");

设置 script 的 src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {alert(data.name);
};

将 script 添加到 body 中
```
document.body.appendChild(script);
```

服务器中路由的处理

router.get("/testAJAX", function (req, res) {console.log("收到请求");var callback = req.query.callback;var obj = {name:"孙悟空", age:18}res.send(callback+"("+JSON.stringify(obj)+")");
});

2.1.1 JSONP 原理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原理演示</title><style>#result {width: 300px;height: 100px;border: solid 1px #78a;}</style>
</head><body><div id="result"></div><script>//处理数据function handle(data) {//获取 result 元素const result = document.getElementById('result');result.innerHTML = data.name;}</script><!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> --><script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

const data = {name: '尚硅谷atguigu'
};handle(data);

2.1.2 JSONP 实践

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例</title>
</head>
<body>用户名: <input type="text" id="username"><p></p><script>//获取 input 元素const input = document.querySelector('input');const p = document.querySelector('p');//声明 handle 函数function handle(data){input.style.border = "solid 1px #f00";//修改 p 标签的提示文本p.innerHTML = data.msg;}//绑定事件input.onblur = function(){//获取用户的输入值let username = this.value;//向服务器端发送请求 检测用户名是否存在//1. 创建 script 标签const script = document.createElement('script');//2. 设置标签的 src 属性script.src = 'http://127.0.0.1:8000/check-username';//3. 将 script 插入到文档中document.body.appendChild(script);}</script>
</body>
</html>

2.1.3 jQuery 中的 JSONP

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery-jsonp</title><style>#result{width:300px;height:100px;border:solid 1px #089;}</style><script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body><button>点击发送 jsonp 请求</button><div id="result"></div><script>$('button').eq(0).click(function(){//固定写法：callback=?，?实际上是一串数字-request.query.callback$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){$('#result').html(`名称: ${data.name}<br>校区: ${data.city}`)});});</script>
</body>
</html>

2.2 CORS

文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用
主要是服务器端的设置：

router.get("/testAJAX", function (req, res) {//通过 res 来设置响应头，来允许跨域请求//res.set("Access-Control-Allow-Origin", "http://127.0.0.1:3000");res.set("Access-Control-Allow-Origin", "*");res.send("testAJAX 返回的响应");
});

2.2.1 CORS实践

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CORS</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>发送请求</button><div id="result"></div><script>const btn = document.querySelector('button');btn.onclick = function(){//1. 创建对象const x = new XMLHttpRequest();//2. 初始化设置x.open("GET", "http://127.0.0.1:8000/cors-server");//3. 发送x.send();//4. 绑定事件x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){//输出响应体console.log(x.response);}}}}</script>
</body>
</html>

3 server.js

//1. 引入express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
//request：对请求报文的封装
//response：对响应报文的封装
app.get('/server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');//设置响应体response.send('hello Ajax');
});//all：可以接受任意类型的请求
app.all('/server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');//响应头，*：所有类型的头信息都可以接受response.setHeader('Acess-Control-Allow-Headers', '*');//设置响应体response.send('hello Ajax POST');
});//JSON 响应
app.all('/json-server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');//响应头response.setHeader('Acess-Control-Allow-Headers', '*')//响应一个数据const data = {name: 'atguigu'};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});//针对IE缓存
app.get('/ie', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');//设置响应体response.send('hello IE');
});//延时响应
app.all('/delay', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');response.setHeader('Acess-Control-Allow-Headers', '*');setTimeout(() => {//设置响应体response.send('延时响应');}, 3000);
});//jQuery 服务
app.all('/jquery-server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');response.setHeader('Acess-Control-Allow-Headers', '*');const data = {name: '尚硅谷'};response.send(JSON.stringify(data));
});//axios 服务
app.all('/axios-server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');response.setHeader('Acess-Control-Allow-Headers', '*');const data = {name: '尚硅谷'};response.send(JSON.stringify(data));
});//fetch 服务
app.all('/fetch-server', (request, response) => {//设置响应头，设置允许跨域response.setHeader('Acess-Control-Allow-Origin', '*');response.setHeader('Acess-Control-Allow-Headers', '*');const data = {name: '尚硅谷'};response.send(JSON.stringify(data));
});//jsonp 服务
app.all('/jsonp-server', (request, response) => {//response.send('console.log("hello jsonp")');const data = {name: '尚硅谷atguigu'};//将数据转化为字符串let str = JSON.stringify(data);//返回结果response.end(`handle(${str})`);//返回结果是一个函数调用，函数的实参就是想给客户端返回的结果数据，函数必须提前声明。
});//用户名检测是否存在
app.all('/check-username', (request, response) => {//response.send('console.log("hello jsonp")');const data = {exist: 1,msg: '用户名已经存在'};//将数据转化为字符串let str = JSON.stringify(data);//返回结果response.end(`handle(${str})`);
});//jquery-jsonp
app.all('/query-jsonp-server', (request, response) => {//response.send('console.log("hello jsonp")');const data = {name: '尚硅谷',city: ['北京', '上海', '深圳']};//将数据转化为字符串let str = JSON.stringify(data);//接收callback参数let cb = request.query.callback;//返回结果response.end(`${cb}${str}`);
});//cors
app.all('/cors-server', (request, response) => {//设置响应头response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", "*");response.setHeader("Access-Control-Allow-Method", "*");//response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send('hello cors');
});//4. 监听窗口启动服务
app.listen(8000, () => {console.log("服务已经启动，8000端口监听中......");
});

【Ajax】跨域

文章目录 1 同源策略1.1 index.html1.2 server.js 2 如何解决跨域2.1 JSONP2.1.1 JSONP 原理2.1.2 JSONP 实践2.1.3 jQuery 中的 JSONP 2.2 CORS2.2.1 CORS实践 3 server.js 1 同源策略同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策…...

编程日记 2024/11/8 5:35:07

yii 常用一些调用

yii 常用一些调用 (增加中) 调用YII框架中 jquery：Yii::app()->clientScript->registerCoreScript(‘jquery’); framework/web/js/source的js,其中registerCoreScript key调用的文件在framework/web/js/packages.php列表中可以查看在view中得到当前contro…...

编程日记 2024/11/8 5:34:06

网页版五子棋——用户模块（服务器开发）

前一篇文章：网页版五子棋—— WebSocket 协议-CSDN博客目录前言一、编写数据库代码 1.数据库设计 2.配置 MyBatis 3.创建实体类 4.创建 UserMapper 二、前后端交互接口 1.登录接口 2.注册接口 3.获取用户信息三、服务器开发 1.代码编写 2.测试后端…...

编程日记 2024/11/8 5:33:05

以RK3568为例,ARM核心板如何实现NTP精准时间同步?

背景网络时间协议NTP（Network TimeProtocol）是用于互联网中时间同步的标准互联网协议，可以把计算机的时间同步到某些时间标准。NTP对于我们产品来说有什么用呢，简单的讲，当你的设备时间不准确了，你可以接…...

编程日记 2024/11/8 5:29:00

Twitter（X）2024最新注册教程

Twitter 现名为X，因为图标是一只小鸟的形象，大家也叫它小蓝鸟（埃隆马斯克于 2023 年对该平台进行了品牌重塑），目前仍然是全球最受欢迎的社交媒体和微博平台之一，全球活跃用户量大概在4.5亿。尤其是欧美国家…...

编程日记 2024/11/8 5:27:59

10.桥接模式设计思想

10.桥接模式设计思想目录介绍 01.桥接模式基础 1.1 桥接模式由来1.2 桥接模式定义1.3 桥接模式场景1.4 桥接模式思考1.5 解决的问题 02.桥接模式实现 2.1 罗列一个场景2.2 桥接结构2.3 桥接基本实现2.4 有哪些注意点 03.桥接实例演示 3.1 需求分析3.2 代码案例实现3.3 是否可…...

编程日记 2024/11/8 5:26:58

Java多线程详解⑤（全程干货！！！）线程安全问题 || 锁 || synchronized

这里是Themberfue 在上一节的最后，我们讨论两个线程同时对一个变量累加所产生的现象在这一节中，我们将更加详细地解释这个现象背后发生的原因以及该如何解决这样类似的现象线程安全问题 public class Demo15 {private static int count 0;public …...

编程日记 2024/11/8 5:25:57

(已解决)Dependency “ ” not found 细谈

剖析原因：依赖在pom文件中引用后，然后ReLoad，此依赖会在你配置的本地仓库里面找，并下载下来，他报not found就是没有找到。本地仓库的位置： 进一步深究：在本地仓库找的时候，他又会…...

编程日记 2024/11/8 5:24:56

网络编程、UDP、TCP、三次握手、四次挥手

一、初识网络编程网络编程的概念：在网络通信协议下，不同计算机上运行的程序，进行的数据传输。应用场景：即时通信、网游对战、金融证券、国际贸易、邮件等等。不管是什么场景，都是计算机和计算机之间通过网络进行…...

编程日记 2024/11/8 5:23:55

程序员的生活周刊 #7：耐克总裁被裁记

0. 庙宇这张图来自 Tianshu Liu， 被树木环绕的宝塔庙宇 1. 耐克总裁耐克最近的总裁 John Donahoe 干了 5 年，终于被裁掉了。这位总裁即不了解球鞋文化，也没有零售经验，但不懂事的董事会还是聘用它，寄托把耐克从运…...

编程日记 2024/11/8 5:21:53

sparkSQL的UDF，最常用的regeister方式自定义函数和udf注册方式定义UDF函数（详细讲解）

- UDF：一对一的函数【User Defined Functions】 - substr、split、concat、instr、length、from_unixtime - UDAF：多对一的函数【User Defined Aggregation Functions】聚合函数 - count、sum、max、min、avg、collect_set/list - UDTF：…...

编程日记 2024/11/8 5:20:52

【Ubuntu20】VSCode Python代码规范工具配置 Pylint + Black + MyPy + isort

常用工具： 在 Ubuntu20 下，有以下常见的 Python 代码工具： 静态分析工具： Pylint 和 Flake8 功能范围：Pylint功能非常强大，能够检查代码质量、潜在错误、代码风格、复杂度等多个方面, 并生成详细的报…...

编程日记 2024/11/8 5:19:51

游戏提示错误：xinput1_3.dll缺失？四种修复错误的xinput1_3.dll文件

在计算机的运行过程中，我们可能会遇到各种各样的问题，其中与“xinput1_3.dll”相关的问题也并不罕见。“xinput1_3.dll”是一个在许多游戏和多媒体应用程序运行过程中可能会用到的动态链接库文件。当我们启动某些游戏时，可能会突然弹出一个错…...

编程日记 2024/11/8 5:16:47

YOLOv11融合IncepitonNeXt[CVPR2024]及相关改进思路

YOLOv11v10v8使用教程： YOLOv11入门到入土使用教程一、模块介绍论文链接：https://arxiv.org/abs/2303.16900 代码链接：https://github.com/sail-sg/inceptionnext 论文速览：受 ViT 长距离建模能力的启发，大核卷积…...

编程日记 2024/11/8 5:13:44

[Web安全网络安全]-学习文章汇总导航（持续更新中）

文章目录： 一：学习路线资源 1.路线 2.资源二：工具三：学习笔记 1.基础阶段 2.进阶阶段四：好的参考五：靶场博主对网络安全很感兴趣，但是不知道如何取学习，自己一步一步…...

编程日记 2024/11/8 5:12:44

Docker Compose部署Rabbitmq(Docker file安装延迟队列)

整个工具的代码都在Gitee或者Github地址内 gitee：solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github：GitHub - ZeroNing/solomon-parent: 这个项目主要是…...

编程日记 2024/11/8 5:11:42

SpringBoot+FileBeat+ELK8.x版本收集日志

一、准备环境 1、ElasticSearch：8.1.0 2、FileBeat：8.1.0 3、Kibana：8.1.0 4、logstach：8.1.0 本次统一版本：8.1.0,4个组件，划分目录，保持版本一致。说明：elasticsearch和kib…...

编程日记 2024/11/8 5:10:41

本地模型导入ollama

文章目录 Modelfile模板导入到 ollama Modelfile模板在本地模型目录下创建 Modelfile FROM ./qwen2.5-7b-instruct-q4_k_m.gguf# 设定温度参数为1 [更高的更具有创新性，更低的更富有连贯性] PARAMETER temperature 1 # 将上下文窗口大小设置为4096，这…...

编程日记 2024/11/8 5:09:40

scala Map训练

Map实训内容： 1.创建一个可变Map,用于存储图书馆中的书籍信息(键为书籍编号,值为包含书籍名称、作者、库存数量的元组)，初始化为包含几本你喜欢的书籍信息。 2.使用操作符添加两本新的书籍到图书馆集合中。 3.根据书籍编号查询某一本特定的书籍信息&…...

编程日记 2024/11/8 5:06:37

WorkFlow源码剖析——Communicator之TCPServer（下）

WorkFlow源码剖析——Communicator之TCPServer（下） 前言系列链接如下： WorkFlow源码剖析——GO-Task 源码分析 WorkFlow源码剖析——Communicator之TCPServer（上） WorkFlow源码剖析——Communicator之TCPServer&…...

编程日记 2024/11/8 5:05:36

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/9/30 16:13:37

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2025/11/9 19:36:23

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容本期用到的软件：yakit（因为经过之前好多期…...

编程新知 2025/11/7 20:02:58

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...

编程新知 2025/11/7 16:01:17

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置目的：快速搭建小型Web服务器以提供数据。工具：第三方Web框架 Flask (需 pip install flask 安装)。安装 Flask：建议：使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议：打开 Py…...

编程新知 2025/10/15 8:34:59

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日，嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》，海云安高敏捷信创白盒（SCAP）成功入选软件供应链安全领域产品名录。在数字化转型加速的今天，网络安全已成为企业生存与发展的核心基石，为了解…...

编程新知 2025/11/9 21:03:00

Java后端检查空条件查询

通过抛出运行异常：throw new RuntimeException("请输入查询条件！");BranchWarehouseServiceImpl.java // 查询试剂交易（入库/出库）记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2025/11/10 5:27:33