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

Angular由一个bug说起之十三：Cross Origin

news 来源：原创 2025/7/4 4:07:30

跨域

想要了解跨域，首要要了解源

什么是源，源等于协议加域名加端口号

只有这三个都相同，才是同源，反之则是非同源。

比如下面这四个里，只有第4个是同源

而浏览器给服务器发送请求时，他们的源一样，就是同源请求，反之就是非同源请求，非同源请求又称为跨域。

当你是跨域时，浏览器为了确保资源安全，会对跨域的访问资源做出一些限制，也就是浏览器的同源策略。

这是W3C上对同源策略的说明：https://www.w3.org/Security/wiki/Same_Origin_Policy

浏览器会对跨域做出哪些限制？

例如：源a和源b，它们是非同源的，则浏览器会有如下限制：

1. DOM访问限制：源a的脚本不能读取和操作源b的DOM。

页面1
1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <h1>我是页面1</h1>
10.	    <button onclick="showDOM()">获取页面2的DOM</button>
11.	    <br>
12.	    <iframe id="framePage" src="./demo.html"></iframe>
13.	    
14.	
15.	    <script type="text/javascript" >
16.	        function showDOM(){
17.	            const framePage = document.getElementById('framePage')
18.	            console.log(framePage.contentWindow.document.body) //同源的可以获取，非同源的无法获取
19.	        }
20.	    </script>
21.	    </body>
22.	</html>
页面2
1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <h2>我是页面2</h2>
10.	</body>
11.	</html>
页面是这样的

点击获取

换一个不同源的页面
1.	<body>
2.	    <h1>我是页面1</h1>
3.	    <button onclick="showDOM()">获取页面2的DOM</button>
4.	    <br>
5.	    
6.	    <iframe id="framePage" src="https://www.bilibili.com"></iframe>
7.	
8.	    <script type="text/javascript">
9.	        function showDOM() {
10.	            const framePage = document.getElementById('framePage')
11.	            console.log(framePage.contentWindow.document.body) //同源的可以获取，非同源的无法获取
12.	        }
13.	    </script>
14.	</body>
获取DOM

获取不到

2. 第二个限制，源a不能访问源b的cookie
3.	<!DOCTYPE html>
4.	<html lang="en">
5.	
6.	<head>
7.	    <meta charset="UTF-8">
8.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9.	    <title>Document</title>
10.	</head>
11.	
12.	<body>
13.	    <h1>我是页面1</h1>
14.	    <button onclick="getCookie()">获取页面2的cookie</button>
15.	    <br>
16.	    
17.	    <iframe id="framePage" src="https://www.bilibili.com"></iframe>
18.	
19.	    <script type="text/javascript">
20.	        function getCookie() {
21.	            const framePage = document.getElementById('framePage')
22.	            console.log(framePage.contentWindow.document.cookie) //同源的可以获取，非同源的无法获取
23.	        }
24.	    </script>
25.	</body>
26.	
27.	</html>
还是一样的页面，这次获取的是cookie

也是获取不到的，因为你在获取document这一步就已经失败了

3. ajax响应数据限制：源a可以给源b发请求，但是无法获取源b响应的数据。

这是一个获取头条新闻的页面

代码
28.	<!DOCTYPE html>
29.	<html lang="en">
30.	<head>
31.	    <meta charset="UTF-8">
32.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
33.	    <title>Document</title>
34.	</head>
35.	<body>
36.	    <button onclick="getNews()">获取头条新闻</button>
37.	
38.	    <script>
39.	        async function getNews() {
40.	            const result = await fetch('https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc');
41.	            const data = await result.json();
42.	            console.log('data');
43.	        }
44.	    </script>
45.	</body>
46.	</html>
页面

获取不到

备注：在上述限制中，浏览器对 Ajax 获取数据的限制是影响最大的一个，且实际开发中经常遇到。

几个注意点

跨域限制仅存在浏览器端，服务端不存在跨域。
即使跨域了，ajax请求也可以正常发出，但响应数据不会交给开发者。
link，script，img这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响。

那么要如何解决跨域

想要解决跨域，一般有三种方法

第一种，用CORS解决ajax跨域问题

CORS 概述

CORS 全称：Cross-Origin Resource Sharing（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照 CORS 规范，添加特定响应头来控制浏览器校验，大致规则如下：

服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过。
服务器明确表示允许跨域请求，则浏览器校验通过。

了解了CORS之后，还要了解一下简单请求和复杂请求

CORS 会把请求分为两类，分别是：1.简单请求、2.复杂请求。

简单请求要满足这个三个条件

请求方法要为 get, head或者post。
请求头字段要符合CORS安全规范(https://fetch.spec.whatwg.org/#cors-safelisted-request-header), 一般只要不手动修改请求头，都能符合改规范。
请求头的Content-Type的值只能是这三种:

text/plain

multipart/form-data

application/x-www-form-urlencoded

不满足这三个要求的请求都是复杂请求，而复杂请求会自动发送预检请求。

预检请求是一种在实际跨域请求发出之前，由浏览器自动发出的一种请求。主要用于向服务器确认是否允许接下来的跨域请求。基本流程是这样的，浏览器先发起一个options请求，携带这个几个请求头，Origin（发起请求的源），Access-Control-Request-Method（实际请求的HTTP方法），Access-Control-Request-Headers（实际请求中使用的自定义头）。如果通过预检，才会继续发起实际的跨域请求。

这就是预检请求

CORS 解决简单请求跨域

前端
1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <button onclick="getData()">获取数据</button>
10.	
11.	    <script>
12.	        async function getData() {
13.	            const url = 'http://127.0.0.1:8081/';
14.	            const result = await fetch(url);
15.	            const data = await result.json();
16.	            console.log('data');
17.	        }
18.	    </script>
19.	</body>
20.	</html>
服务端代码（以express框架为例）：
1.	const express = require('express');
2.	const app = express();
3.	
4.	app.get('/', (req, res) => {
5.	    res.send([{ name: '张三', age: 19 }])
6.	})
7.	
8.	app.listen(8081, () => {
9.	    console.log('服务器成功启动');
10.	})
这个时候是获取不到数据的

设置下cors
1.	const express = require('express');
2.	const app = express();
3.	
4.	app.get('/', (req, res) => {
5.	    res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
6.	    res.send([{ name: '张三', age: 19 }])
7.	})
8.	
9.	app.listen(8081, () => {
10.	    console.log('服务器成功启动');
11.	})
这样就能获取到数据了

整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过。

像这样的设置是允许某个源跨域
1.	// 允许 http://127.0.0.1:5500 这个源发起跨域请求
2.	res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
而这样则是允许所有源跨域
1.	// 允许所有源发起跨域请求
2.	res.setHeader('Access-Control-Allow-Origin', '*')
CORS 解决复杂请求跨域

第一步：服务器先通过浏览器的预检请求，服务器需要返回如下响应头

Access-Control-Allow-Origin（允许的源）

Access-Control-Allow-Methods（允许的方法）

Access-Control-Allow-Headers（允许的自定义头）

Access-Control-Max-Age（预检请求的结果缓存时间（可选））

第二步：处理实际的跨域请求（与处理简单请求跨域的方式相同）

服务器代码
1.	const express = require('express');
2.	const app = express();
3.	
4.	app.options('/', (req, res) => {
5.	    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
6.	    res.setHeader('Access-Control-Allow-Methods', 'GET')
7.	    res.setHeader('Access-Control-Allow-Headers', 'city')
8.	    res.send()
9.	})
10.	
11.	app.get('/', (req, res) => {
12.	    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
13.	    res.send([{ name: '张三', age: 19 }])
14.	})
15.	
16.	app.listen(8081, () => {
17.	    console.log('服务器成功启动');
18.	})
前端代码
1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <button onclick="getData()">获取数据</button>
10.	
11.	    <script>
12.	        async function getData() {
13.	            const url = 'http://127.0.0.1:8081/';
14.	            const result = await fetch(url, { method: 'GET', headers: { city: 'beijing' } });
15.	            const data = await result.json();
16.	            console.log('data', data);
17.	        }
18.	    </script>
19.	</body>
20.	</html>
数据获取到了

预检请求返回的响应头

借助 cors 库快速完成配置

上述的配置中需要自己配置响应头，比较麻烦，借助cors库，可以更方便完成配置

安装cors

npm i cors

配置cors
1.	const express = require('express');
2.	const cors = require('cors');
3.	const app = express();
4.	
5.	// 使用cors中间件
6.	app.use(cors({
7.	    origin: 'http://127.0.0.1:5500', // 允许的源
8.	    methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允许的方法
9.	    allowedHeaders: ['city'], // 允许的自定义头
10.	    exposedHeaders: ['abc'], // 要暴露的响应头
11.	    optionsSuccessStatus: 200 // 预检请求成功的状态码
12.	}))
13.	
14.	app.get('/', (req, res) => {
15.	    res.setHeader('abc', '123')
16.	    res.send([{ name: '张三', age: 19 }])
17.	})
18.	
19.	app.listen(8081, () => {
20.	    console.log('服务器成功启动');
21.	})
22.	
成功获取数据

第二种，JSONP 解决跨域问题

JSONP 概述： JSONP 是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 的时，可以靠 JSONP 解决跨域(现在基本不用了)。

基本流程：

- 第一步：客户端创建一个<script>标签，并将其src属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
- 第二步：服务端接收到请求后，将数据封装在回调函数中并返回。
- 第三步：客户端的回调函数被调用，数据以参数的形势传入回调函数。

示例代码

前端

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <script>
10.	        function callback(data) {
11.	            console.log('data', data)
12.	        }
13.	    </script>
14.	    <script src="http://127.0.0.1:8081/users"></script>
15.	</body>
16.	</html>

后端

1.	const express = require('express');
2.	const app = express();
3.	
4.	app.get('/users', (req, res) => {
5.	    res.send(`callback([{ name: '张三', age: 19 }])`)
6.	})
7.	
8.	app.listen(8081, () => {
9.	    console.log('服务器成功启动');
10.	})

结果

优化下代码

前端

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	
4.	<head>
5.	    <meta charset="UTF-8">
6.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.	    <title>Document</title>
8.	</head>
9.	
10.	<body>
11.	    <button onclick="getUsers()">获取用户</button>
12.	
13.	    <script>
14.	        function test(data) {
15.	            console.log('data', data)
16.	        }
17.	        function getUsers() {
18.	            // 创建script元素
19.	            const script = document.createElement('script')
20.	            // 指定script的src属性
21.	            script.src = 'http://127.0.0.1:8081/users?callback=test'
22.	            // 将script元素添加到body中触发脚本加载
23.	            document.body.appendChild(script)
24.	            // script标签加载完毕后移除该标签
25.	            script.onload = () => {
26.	                script.remove()
27.	            }
28.	        }
29.	    </script>
30.	</body>
31.	
32.	</html>

后端

1.	const express = require('express');
2.	const app = express();
3.	
4.	const users = [
5.	    { name: '张三', age: 19 },
6.	    { name: '李四', age: 20 }
7.	]
8.	
9.	app.get('/users', (req, res) => {
10.	    const { callback } = req.query
11.	    res.send(`${callback}(${JSON.stringify(users)})`)
12.	})
13.	
14.	app.listen(8081, () => {
15.	    console.log('服务器成功启动');
16.	})

效果

用jQuery封装jsonp

1.	$.getJSON('http://127.0.0.1:8081/teachers?callback=?', (data) => {
2.	            console.log(data)
3.	        })

第三种，配置代理服务器解决跨域

这里需要用到http-proxy-middleware这个包来配置代理服务器

下载http-proxy-middleware

npm i http-proxy-middleware

前端

1.	<!DOCTYPE html>
2.	<html lang="en">
3.	<head>
4.	    <meta charset="UTF-8">
5.	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.	    <title>Document</title>
7.	</head>
8.	<body>
9.	    <button onclick="getNews()">获取头条数据</button>
10.	
11.	    <script>
12.	        async function getNews() {
13.	            const url = 'http://127.0.0.1:8081/api/hot-event/hot-board/?origin=toutiao_pc';
14.	            const result = await fetch(url);
15.	            const data = result.json();
16.	            console.log('data', data);
17.	        }
18.	    </script>
19.	</body>
20.	</html>

后端

1.	const express = require('express');
2.	const app = express();
3.	const { createProxyMiddleware } = require('http-proxy-middleware');
4.	
5.	app.use(express.static('./public'))
6.	
7.	app.use('/api', createProxyMiddleware({ // 拦截所有带有/api的请求
8.	    target:'https://www.toutiao.com', // 转发的目标
9.	    changeOrigin:true, // 允许跨域
10.	    pathRewrite:{
11.	      '^/api':'' // 把路径中的/api去掉
12.	    }
13.	  }))
14.	
15.	app.listen(8081, () => {
16.	    console.log('服务器成功启动');
17.	})
18.

需要把前端代码当成静态资源部署在服务器上

把服务器启动了，需要去http://127.0.0.1:8081获取页面

点击获取数据

数据成功获取

Angular由一个bug说起之十三：Cross Origin

跨域想要了解跨域，首要要了解源什么是源，源等于协议加域名加端口号只有这三个都相同，才是同源，反之则是非同源。比如下面这四个里，只有第4个是同源而浏览器给服务器发送请求时，他们的源一样&#xff0…...

编程日记 2025/7/4 4:07:30

为深度学习引入张量

为深度学习引入张量什么是张量？ 神经网络中的输入、输出和转换都是使用张量表示的，因此，神经网络编程大量使用张量。张量是神经网络使用的主要数据结构。张量的概念是其他更具体概念的数学概括。让我们看看一些张量的具体实例。张量…...

编程日记 2025/7/4 2:40:18

opencv摄像头标定程序实现

摄像头标定是计算机视觉中的一个重要步骤，用于确定摄像头的内参（如焦距、主点、畸变系数等）和外参（如旋转矩阵和平移向量）。OpenCV 提供了方便的工具来进行摄像头标定。下面分别给出 C 和 Python 的实现。 1. C 实现…...

编程日记 2025/7/4 3:21:13

Flutter：封装一个自用的bottom_picker选择器

效果图：单列选择器使用bottom_picker: ^2.9.0实现，单列选择器，官方文档 pubspec.yaml # 底部选择 bottom_picker: ^2.9.0picker_utils.dart AppTheme：自定义的颜色 TextWidget.body Text() <Widget>[].toRow Row()下边代…...

编程日记 2025/7/1 5:00:35

Docker 容器自动化管理之脚本(Script for Docker Container Automation Management)

Docker 容器自动化管理之脚本简介 Docker‌是一个开源的容器化平台，旨在简化应用程序的开发、部署和运行过程。它通过将应用程序及其依赖项打包到一个可移植的容器中，使得开发人员能够在不同的环境中以一致的方式构建、打包和分发应用程序‌。 Docke…...

编程日记 2025/7/4 3:20:32

Reference https://stackoverflow.com/questions/51399407/watch-in-k8s-golang-api-watches-and-get-events-but-after-sometime-doesnt-get-an 问题描述最近在使用 client-go 的 watch 机制监听 k8s 中的 deployment 资源时，发现一个奇怪的现象先看下代码&a…...

编程日记 2025/7/1 23:28:59

用户界面的UML建模11

然而，在用户界面方面，重要的是要了解《boundary》类是如何与这个异常分层结构进行关联的。《exception》类的对象可以作为《control》类的对象。因此，《exception》类能够聚合《boundary》类。参见图12，《exception》Database…...

编程日记 2025/7/2 8:25:19

计算机网络之---数据链路层的功能与作用

数据链路层概念数据链路层（Data Link Layer）是计算机网络中的第二层，它位于物理层和网络层之间，主要负责数据在物理链路上的可靠传输。其基本功能是将网络层传来的数据分成帧，并负责在物理链路上可靠地传输这些数据帧…...

编程日记 2025/7/4 3:09:01

添加到 PATH 环境变量中

命令解释 # 将命令中的<CLI_PATH>替换为您aliyun文件的所在目录。 echo export PATH$PATH:<CLI_PATH> >> ~/.bash_profile echo export PATH$PATH:/data2/ljsang/aliyun/aliyun >> ~/.bash_profileexport PATH$PATH:/data2/ljsang/aliyun/aliyun&…...

编程日记 2025/7/4 3:39:09

【51单片机零基础-chapter6:LCD1602调试工具】

实验0-用显示屏LCD验证自己的猜想如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…...

编程日记 2025/7/4 3:08:07

Linux 内核中的 netif_start_queue 函数：启动网络接口发送队列的关键

在 Linux 内核的网络子系统中，netif_start_queue 函数扮演着至关重要的角色。这个函数的主要功能是启动（或启用）网络接口的发送队列，标志着网络接口已经准备好开始发送数据包。本文将深入探讨 netif_start_queue 函数的用途、工作原理以及在实际网络驱动代码中的应用。函…...

编程日记 2025/7/4 3:44:52

（七）人工智能进阶之人脸识别：从刷脸支付到智能安防的奥秘，小白都可以入手的MTCNN+Arcface网络

零、开篇趣谈还记得第一次用支付宝"刷脸"时的新奇感吗？或者被抖音的人脸特效逗乐的瞬间？这些有趣的应用背后，其实藏着一个精妙的AI世界。今天，就让我们开启一段奇妙的人脸识别技术探索之旅吧！ 一、人脸识…...

编程日记 2025/7/3 22:15:15

ExcelDataReader：一个.Net高性能Excel开源读取器

推荐一个用于读取Microsoft Excel文件的高性能开源库。 01 项目简介 ExcelDataReader是一个功能强大且易于使用的开源项目，提供了丰富的读取API，专门读取Excel文件的数据，特别是处理大数据量的情况。 ExcelDataReader支持Excel版本从2007年…...

编程日记 2025/7/4 3:13:44

人工智能-机器学习之多元线性回归（项目实践一）

目标：运用scikit-learn进行多元线性回归方程的构建，通过实际案例的训练集和测试集进行预测，最终通过预测结果和MSE来评估预测的精度。一、首先安装scikit-learn：pip install scikit-learn C:\Users\CMCC\PycharmProjects\AiPro…...

编程日记 2025/7/4 4:07:04

Mysql--基础篇--约束（主键，外键，唯一，检查，枚举及复合约束等）

在MySQL中，约束（Constraints）是用于确保数据库中数据完整性和一致性的规则。通过定义约束，可以防止用户插入、更新或删除不符合特定条件的数据，从而保证数据的准确性和可靠性。MySQL支持多种类型的约束，每种…...

编程日记 2025/7/2 1:30:38

经典多模态模型CLIP - 直观且详尽的解释

对比语言-图像预训练（CLIP），这是一种创新的多模态建模策略，能够创建视觉和语言的联合表示。CLIP 的效果非常出色，可以用于构建高度特定且性能卓越的分类器，而无需任何训练数据。本文将深入探讨其理论基础&a…...

编程日记 2025/6/28 14:58:28

着丝粒鉴定CentIER v3.0安装与使用-bioinfomatics tools41

使用CentIE鉴定着丝粒 T2T基因组端粒与着丝粒的区别及其鉴定方法-随笔02_chip-seq鉴定着丝粒-CSDN博客 T2T时代的基因组组装-文献精读-9_基因组t2t组装-CSDN博客桑树T2T基因组-文献精读16_桑树基因组-CSDN博客辣椒属2个T2T基因组-文献精读23_辣椒基因组-CSDN博客大花…...

编程日记 2025/7/4 2:56:07

Objective-C语言的多线程编程

Objective-C语言的多线程编程在现代应用程序开发中，尤其是移动应用开发，多线程编程是一个不可或缺的部分。使用多线程可以提升应用的响应能力，使得可以同时处理多个任务，从而优化用户体验。在本文中，我们将深入探讨O…...

编程日记 2025/7/4 3:50:04

Golang的并发编程框架比较

# Golang的并发编程框架比较中的并发编程在现代软件开发中，处理高并发的能力愈发重要。Golang作为一门支持并发编程的编程语言，提供了丰富的并发编程框架和工具，使得开发者能够更轻松地处理并发任务。本文将介绍Golang中几种常用的并发编程…...

编程日记 2025/7/4 2:49:21

通过 oh-my-posh posh-git 优化PowerShell

转自oh-my-posh & posh-git 提升在 windows 环境的开发体验 oh-my-posh 是用于自定义 PowerShell 主题和配色的工具，posh-git 则是为 PowerShell 提供了方便的 git 状态显示和命令补全功能。安装PowerShell 7和 winget下载器，都可以直接在 Microsof…...

编程日记 2025/6/28 13:58:35

【Linux系列】Vim 编辑器中的高效文本编辑技巧：删除操作

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/2 22:48:13

慧集通（DataLinkX）iPaaS集成平台-连接器

如何创建连接器？ 连接器是用于跟各系统进行连接，是集成交互的基础构成也是主要构成之一；连接器一般是根据业务系统的开放的不同方式由开发人员进行封装，封装完成后交付人员可以在所有连接那里建立对应的连接，连接需要…...

编程日记 2025/7/3 10:00:34

vue3使用vue3-video-play播放m3u8视频

1.安装vue3-video-play npm install vue3-video-play --save2.在组件中使用 import vue3-video-play/dist/style.css; import VideoPlay from vue3-video-play;// 视频配置项 const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源mute…...

编程日记 2025/7/3 17:54:24

单片机-外部中断

中断是指 CPU 在处理某一事件 A 时，发生了另一事件 B，请求 CPU 迅速去处理(中断发生)；CPU 暂时停止当前的工作(中断响应)， 转去处理事件 B(中断服务)；待 CPU 将事件 B 处理完毕后，再回到原来事件 A 被中断的…...

编程日记 2025/6/28 14:02:10

《C++11》右值引用深度解析：性能优化的秘密武器

C11引入了一个新的概念——右值引用，这是一个相当深奥且重要的概念。为了理解右值引用，我们需要先理解左值和右值的概念，然后再理解左值引用和右值引用。本文将详细解析这些概念，并通过实例进行说明，以揭示右值引用如何…...

编程日记 2025/7/1 17:27:57

【HTML+CSS+JS+VUE】web前端教程-1-VScode开发者工具快捷键

VScode打开文件夹与创建文件 1、选择文件夹 2、拖拽文件夹生成浏览器文件.html的快捷方式 ! 回车vscode常用快捷键列表代码格式化：shift alt F 向上或向下移动一行： alt up 或者 alt down 快速复制一行代码：shift alt up 或者 sh…...

编程日记 2025/7/2 13:51:58

【嵌入式硬件】直流电机驱动相关

项目场景： 驱动履带车（双直流电机）前进、后退、转弯问题描述电机驱动MOS管烧毁电机驱动采用IR2104STRH1R403NL的H桥方案（这是修改之后的图） 原因分析： 1.主要原因是4路PWM没有限幅，修改…...

编程日记 2025/7/2 8:25:45

接口测试-postman（使用postman测试接口笔记）

一、设置全局变量 1. 点击右上角设置按钮-》打开管理环境窗口-》选择”全局“-》设置变量名称，初始值和当前值设置一样的，放host放拼接的url，key放鉴权那一串字符，然后保存-》去使用全局变量，用{{变量名称}}形式二、…...

编程日记 2025/6/28 16:39:01

强化学习常用库的版本对应关系

本文介绍了pytorch强化学习框架和常用python库的对应关系。持续更新中！基础包工具包版本描述python3.9.13-numpy1.24.3-protobuf3.19.6结构化数据包cython0.29.21静态编译器setuptools66.0.0-学习框架工...

编程日记 2025/7/2 15:01:03

Unity 热更新基础知识

文章目录 1.一些名词2.三种编译方式3.Unity 两种脚本后端3.1 Mono3.2 IL2CPP3.3 对比 1.一些名词 IL（Intermediate Language）：中间语言（类似于汇编代码）CIL（Common Intermediate Language）&…...

编程日记 2025/6/29 20:10:02

JetBrains IDEs和Visual Studio Code的对比

JetBrains IDEs和Visual Studio Code的对比 JetBrains IDEs是捷克JetBrains公司开发的一系列集成开发环境（IDE）。以下是具体介绍：IntelliJ IDEA是JetBrains 公司的一款产品主要产品 IntelliJ IDEA：一款功能强大且广泛应用的Java集成开发环境，有开源免费的社区版和商业收…...

编程日记 2025/7/2 4:36:09

C语言将点分十进制的IP字符串转成4个整数

最近在做lldp的snmp返回值时需要做这样的转换处理：C语言将点分十进制的IP字符串转成4个整数。这里用两种方式： sscanf格式化处理用 inet_aton函数将ip字符串转成32位的整形，然后再根据bit转成对应的4个整数。 man命令可以确认下sscanf和i…...

编程日记 2025/6/28 14:02:03

慧集通（DataLinkX）iPaaS集成平台:数据流程的基本操作

流程搭建与发布该功能下是我们集成的流程配置实现，在这里我们可以通过搭建一条条不同的流程来实现不同的业务场景。列表界面如下所示： 下面我们做一个业务场景的流程来具体讲解下该功能（OA销售单推送T销售出库单场景）。首先…...

编程日记 2025/7/2 23:14:42

三线结构光避障远近有度，石头自清洁扫拖机器人G30上市

1月8日，石头科技发布新一代自清洁扫拖机器人产品G30，以卓越的旗舰级性能，为用户带来了更为全面极致的清洁体验。在本届CES2025展会期间，石头G30现身石头科技展台，彰显极致清洁科技。据「TMT星球」了解，石头…...

编程日记 2025/7/2 21:29:38

深入理解 React 中 setState 的行为及状态更新时机

在 React 开发中，setState 是我们更新组件状态的核心 API。然而，setState 的行为因调用场景的不同而有所变化，这可能会让许多开发者感到困惑。特别是在 React 18 中，引入了自动批量更新机制，使得部分场景的行为发生了变…...

编程日记 2025/6/29 17:37:02

一次完成Win10下MySQL 9.1 的安装

文章目录前言一、安装环境二、安装方式选择三、下载四、安装总结前言一、安装环境 1、MySQL9.1.0.zip 下载地址：https://dev.mysql.com/downloads/mysql/ 2、Win10 3、客户端MySQL Workbench8.0 CE 下载地址：https://dev.mysql.com/downloads/w…...

编程日记 2025/7/4 3:18:46

有限元分析学习——Anasys Workbanch第一阶段笔记(8)水杯案例的对称与轴对称处理

目录 1 序言 2 对称处理 2.1 模型处理 2.2 网格划分、约束载荷及接触设置 2.3 计算结果 3 轴对称处理 3.1 对称与轴对称概念 3.2 轴对称问题的应用 3.2.1 创建分析案例 3.2.2 导入并处理模型 3.2.3 网格划分、约束载荷及接触设置 3.2.4 后处理计算结果 1 序言本章…...

编程日记 2025/7/1 7:35:43

Vmware安装centos

用来记录自己安装的过程一、创建虚拟机安装centos镜像点击完成后，等待一会会进入centos的系统初始化界面二、centos初始化配置三、配置网络 1、虚拟网络编辑器，开启VMnet1、VMnet8的DHCP vmware左上角工具栏，点击【编辑】->【虚拟网…...

编程日记 2025/6/30 2:01:31

[Unity]MacOS下开发Unity

需要的插件我使用的是vscode，经过长时间的使用我发现一个问题就是很多插件都是动态的在变化的，不是一成不变的，可能是重构，可能直接换了其他的工具。所以这个插件也会是更新的状态。 2025年01月08日更新 .NET Install Tool …...

编程日记 2025/7/3 11:33:11

快手短剧播放器uniapp如何引入与对接？

uniApp前端微短剧项目开源分享开源地址：git开源下载地址文章目录快手短剧播放器uniapp如何引入与对接？1.引入短剧播放器2.创建文件kscomponents组件3.local-stream.js文件说明4.用户行为事件4.local-stream.ksml文件参考如下快手短剧播放器uniapp如何…...

编程日记 2025/7/2 23:42:18

Java 数据结构之-LinkedHashMap

继承关系和基本概念 LinkedHashMap是HashMap的子类，它继承了HashMap的基本功能。它在HashMap的基础上，通过维护一个双向链表来记录元素的插入顺序或者访问顺序（可以通过构造函数指定），从而在遍历元素时能够按照特定的顺…...

编程日记 2025/7/3 1:56:06

记一次踩坑：json.Unmarshal() 解析数字类型

首先我们先明确下 json 包下 Unmarshal() 函数是什么： 它是 Go 语言标准库 encoding/json 中的一个函数，用于将 JSON 数据解析为 Go 语言中的数据结构。它的作用是将一个 JSON 格式的字节切片（[]byte）转换为对应的 Go 语言数据类…...

编程日记 2025/7/2 4:36:39

leetcode78.子集

给你一个整数数组 nums ，数组中的元素互不相同。返回该数组所有可能的子集（幂集）。解集不能包含重复的子集。你可以按任意顺序返回解集。示例 1： 输入：nums [1,2,3] 输出：[[],[1],[2],[1,2],[3],…...

编程日记 2025/6/28 15:02:28

docker学习记录：创建mongodb副本集

目的，是创建三个，避免出现错误时，仍然能正常工作。要在 Docker 中创建一个 MongoDB 集群（副本集），并确保数据存储在本地，同时允许局域网访问，你可以按照以下步骤进行操作。我们将创…...

编程日记 2025/7/1 1:25:08

JAVA学习-练习试用Java实现“从用户输入获取一个字符串，并使用split方法将其拆分为单词数组，然后打印出所有单词”

问题： 创建一个Java程序，从用户输入获取一个字符串，并使用split方法将其拆分为单词数组，然后打印出所有单词。解答思路： 以下是一个Java程序，它从用户输入获取一个字符串，并使用 split 方法…...

编程日记 2025/7/1 0:15:07

网络安全 | 数据隐私保护：全球趋势与合规要求

网络安全 | 数据隐私保护：全球趋势与合规要求一、前言二、全球数据隐私保护的主要趋势2.1 法律法规的强化2.2 消费者意识的觉醒2.3 技术创新推动隐私保护升级三、不同国家和地区的数据隐私法规3.1 欧盟《通用数据保护条例》（GDPR）3.2 美国《…...

编程日记 2025/6/29 22:12:54

2025年度流行色揭晓：温暖舒适的摩卡慕斯

近日，全球色彩权威机构Pantone公布了2025年度流行色——PANTONE 17-1230 Mocha Mousse (摩卡慕斯)。这是一种温暖的柔和棕色，蕴含着内在的丰富质感，让人联想到可可、巧克力和咖啡的美味质量，满足我们对舒适和简单愉悦的渴望。 Pan…...

编程日记 2025/7/3 18:12:05

el-table拖拽表格

1、拖拽插件安装 npm i -S vuedraggable // vuedraggable依赖Sortable.js，我们可以直接引入Sortable使用Sortable的特性。 // vuedraggable是Sortable的一种加强，实现组件化的思想，可以结合Vue，使用起来更方便。 2、引入拖拽函数…...

编程日记 2025/6/30 1:57:11

Oracle LiveLabs实验: Multitenant Advanced Capabilities

本文为Oracle LiveLabs中实验Multitenant Advanced Capabilities的过程记录。本实验不提供云上的免费环境，需要利用你自己的OCI账号来创建环境。实验环境是通过OCI中的Stack，也就是Terraform自动创建的。 Oracle Resource Manager (ORM) stack 文件…...

编程日记 2025/6/30 20:02:53

【大模型】百度千帆大模型对接LangChain使用详解

目录一、前言二、LangChain架构与核心组件 2.1 LangChain 核心架构 2.2 LangChain 核心组件三、环境准备 3.1 前置准备 3.1.1 创建应用并获取apikey 3.1.2 开通付费功能 3.2 获取LangChain文档 3.3 安装LangChain依赖包四、百度千帆大模型对接 LangChain 4.1 LL…...

编程日记 2025/7/2 13:03:39

跨域

那么要如何解决跨域

第一种，用CORS解决ajax跨域问题

第二种，JSONP 解决跨域问题

第三种，配置代理服务器解决跨域

相关文章：