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

【Ajax】跨域

news 2025/7/3 0:26:45

文章目录

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

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/6/30 8:11:12

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/6/28 14:16:11

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2025/7/2 22:42:45

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/6/17 17:48:41

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/6/25 14:50:21

MMaDA: Multimodal Large Diffusion Language Models

CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/6/26 8:37:19

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/6/21 16:15:28

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/6/15 13:02:49

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/6/25 8:05:30