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

【Ajax】跨域

news 文章来源：https://blog.csdn.net/weixin_45980065/article/details/143526782 2025/5/16 0:41:57

文章目录

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

数据结构与算法分析：专题内容——动态规划2之例题讲解（代码详解+万字长文+算法导论+力扣题）

一、最长公共子序列在生物应用中，经常需要比较两个(或多个)不同生物体的 DNA。一个 DNA 串由一串称为碱基(base)的分子组成，碱基有腺嘌呤、鸟嘌呤、胞嘧啶和胸腺嘧啶 4 种类型。我们用英文单词首字母表示 4 种碱基，这样就可以将一个 DNA 串…...

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

【Qt】QTreeView 和 QStandardItemModel的关系

QTreeView 和 QAbstractItemModel（通常是其子类，如 QStandardItemModel 或自定义模型）是 Qt 框架中的两个关键组件，它们之间存在密切的关系。关系概述 QTreeView： QTreeView 是一个用于显示和编辑层次数据的视图小部…...

编程日记 2024/11/8 5:02:30

containerd配置私有仓库registry

机器ip端口regtisry192.168.0.725000k8s-*-------k8s集群 1、镜像上传 rootadmin:~# docker push 192.168.0.72:5000/nginx:1.26.1-alpine The push refers to repository [192.168.0.72:5000/nginx] 6961f0b8531c: Pushed 3112cd521249: Pushed d3f50ce9b5b5: Pushed 9efaf2eb…...

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

深入解析语音识别中的关键技术：GMM、HMM、DNN和语言模型

目录一、高斯混合模型（GMM）与期望最大化（EM）算法二、隐马尔可夫模型（HMM）三、深度神经网络（DNN）四、语言模型（LM）五、ASR系统的整体工作流程结论在现代语音…...

编程日记 2024/11/8 4:59:25

C++循环引用

C循环引用‌指的是两个或多个类之间互相引用对方，形成一个循环的引用关系。循环引用的问题： 编译错误‌：编译器在编译过程中会按照包含关系依次编译每个文件，当编译ClassA时，它会尝试包含ClassB.h文件，而…...

编程日记 2024/11/8 4:56:23

dayseven-因果分析-图模型与结构因果模型

在数学上，“图”(graph)是顶点（vertex，也可以称为节点）和边(edge)的集合，表示为图G(V,E)，其中V是节点的集合，E是边的集合，图中的节点之间通过边相连（也可以不相连&…...

编程日记 2024/11/8 4:55:21

并发编程（8）—— std::async、std::future 源码解析

文章目录八、day81. std::async2. std::future2.1 wait()2.2 get() 八、day8 之前说过，std::async内部的处理逻辑和std::thread相似，而且std::async和std::future有密不可分的联系。今天，通过对std::async和std::future源码进行解析&#x…...

编程日记 2024/11/8 4:53:19

稻米分类和病害检测数据集（猫脸码客第237期）

稻米分类图像数据集：推动农业智能化发展的关键资源在农业领域，稻米作为世界上最重要的粮食作物之一，其品种繁多，各具特色。然而，传统的稻米分类方法往往依赖于人工观察和经验判断，不仅耗时费力&#xff0…...

编程日记 2024/11/8 4:47:13

HANDLINK ISS-7000v2 网关 login_handler.cgi 未授权RCE漏洞复现

0x01 产品简介瀚霖科技股份有限公司ISS-7000 v2网络网关服务器是台高性能的网关，提供各类酒店网络认证计费的完整解决方案。由于智慧手机与平板电脑日渐普及，人们工作之时开始使用随身携带的设备，因此无线网络也成为网络使用者基本服务的项目。ISS-7000 v2可登录300至1000…...

编程日记 2024/11/8 4:46:12

基于Multisim串联型连续可调直流稳压正电源电路设计与仿真

设计任务和要求： （1）输出直流电压 1.5∽10V 可调； （2）输出电流 IOm300mA；（有电流扩展功能） （3）稳压系数 Sr≤0.05； （4&…...

编程日记 2024/11/8 4:43:09