Express 通过 CORS 或 JSONP 解决跨域问题

news2024/11/14 15:43:37

文章目录

  • 参考
  • 描述
  • 同源策略
      • 同源
      • 同源策略
          • 示例
          • CSRF 攻击
      • 解决跨域问题
  • CORS
      • CORS 响应头部
          • Access-Control-Allow-Origin
          • 简单请求
          • 预检请求
            • 预检请求包含的两次请求
            • 解决
      • CORS 中间件
          • 使用 CORS 中间件处理跨域请求
  • JSONP
      • 通过原生 JS 向服务器端发起 JSONP 请求
      • 通过 jQuery 向客户端发起 JSONP 请求

参考

项目描述
W3schoolAJAX
MDN同源策略
MDNCORS
搜索引擎Bing
哔哩哔哩黑马程序员
C 语言中文网JSONP 是什么

描述

项目描述
NodeJSv18.13.0
nodemon2.0.20
cors2.8.5
Edge109.0.1518.61 (正式版本) (64 位)
jQuery3.6.3
npm8.19.3

同源策略

同源

如果两个 URL 的协议、主机地址及端口号均相同，则这两个 URL 是同源的。

对比：

与 URL http://store.company.com/dir/page.html 的源进行对比为例：

项目结果原因
http://store.company.com/dir2/other.html同源两个 URL 的协议、主机地址及端口号均相同，仅存在路径上的不同。
http://store.company.com/dir/inner/another.html同源仅路径存在不同。
https://store.company.com/secure.html非同源两者使用的协议并不相同。
http://store.company.com:81/dir/etc.html非同源两者使用的端口不同，http 默认使用 80 端口。
http://news.company.com/dir/other.html非同源两者使用的主机地址不同。

IE：

IE 浏览器在对两个 URL 进行比较时，仅会检查两者的主机地址与使用的协议是否相同，如果这些内容相同，则两者同源。

同源策略

同源策略（Same Origin Policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略是浏览器的行为，拦截的是服务器端的响应，即请求发送了，服务器对此进行响应，但是无法被浏览器接收并呈现给用户。

上述内容整理自 百度百科

注：

同源策略的相关功能由浏览器来实现，这说明我们可以通过 BurpSuite 、Postman 等工具来绕过同源策略。

示例

我为你准备了一个示例，希望能加深你对同源策略的理解。

服务器端代码：

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

app.get('/', (req, res) => {
    console.log('【已接收到客户端发出的请求】');
    // 向客户端发送响应信息
    res.send(req.query);
})

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
</head>
<body>

    <!-- 设置按钮用于发送 AJAX 请求 -->
    <button id="btn">GET</button>

    <!-- 导入 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        // 为按钮绑定点击事件，在点击按钮后将向服务器发送 GET 请求
        $('#btn').on('click', function() {
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:9090',
                // 定义需要发送的数据
                data: {user: 'RedHeart', age: 18, gender: 'male'},
                // 在接收到服务器端的响应信息后在浏览器控制台中打印响应信息
                success: (res) => {
                    console.log(res);
                }
            })
        })
    </script>
</body>
</html>

执行效果：

在点击客户端页面的按钮向服务器端发送 AJAX 请求（GET 请求）后，我们将在浏览器控制台中观察到如下信息：

错误信息

这表明我们的请求已经成功发送到服务器端且服务器端对此进行了响应，但由于同源策略，我们并不能观察到响应内容。

分析：

在使用客户端向服务器端发送 GET 请求时，客户端页面的 URL 为
file:///C:/Users/36683/TwoMoons/WWW/MoonLight/src/index.html
可以看到该 URL 在协议、主机地址以及端口号方面均不与服务器端 URL （http://127.0.0.1:9090）相同。

修改：

你可以使用如下服务器端代码以告知客户端浏览器服务器可以接收跨域请求。

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由以处理客户端的 GET 请求
app.get('/', (req, res) => {
    // 设置服务器端的响应头
    res.setHeader(' Access-Control-Allow-Origin', '*');
    // 对客户端的请求进行相应
    res.send(req.query);
})
CSRF 攻击

同源策略的一个主要功能就是有效阻止可能发生的 CSRF（Cross Site Request Forgery，跨站伪造请求） 。

假设有 A、B 两个网站，其中 B 网站是一家对你较为重要的网站。如果你在登录 B 网站后，前往 A 网站。A 网站可以构造一个 AJAX 请求向 B 网站发送请求，由于此时浏览器已经保存有你的 Cookie 信息（A 网站可以用 Cookie 登录 B 网站），所以该请求可以伪造成你的身份对 B 网站进行 A 网站指定的操作（在 B 网站没有做其他防护的前提下）。

而由于同源策略的存在，A 网站并不能接收到 B 网站服务器端的响应信息。从而达到了保护用户的目的（完全防御 CSRF 攻击还需要进行其他操作）。

解决跨域问题

在某些情况下，同源策略会对我们的 Web 应用起到限制作用。比如：

你搭建一个提供接口的网站，但由于同源策略的原因，其他网站无法请求并使用这个接口。

解决跨域问题有两种方式，即 CORS（Cross Origin Resource Sharing，跨域资源共享） 及 JSONP（JSON with Padding， 携带资源的 JSON）。

  1. CORS
    目前的主流方案，推荐使用。
  2. JSONP
    仅支持 GET 请求方式。

CORS

CORS （Cross-Origin Resource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定了浏览器是否阻止前端的 JavaScript 代码跨域获取资源。
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。

注：

  1. 解决跨域问题仅需在服务器端进行配置，客户端中无需进行任何操作。
  2. CORS 存在兼容性问题，仅能够在支持 XMLHttpRequest Level2 的浏览器中使用。

CORS 兼容性
3. CORS 的相关响应头部的前缀均为 Acess-Control-Allow 。

CORS 响应头部

Access-Control-Allow-Origin

该响应头用于服务器告知客户端浏览器允许该外域 URL 访问本服务器中的资源。
你可以通过如下代码设置响应头以使外域 URL https://www.baidu.com 访问本机服务器资源。

res.setHeader(' Access-Control-Allow-Origin', 'https://www.baidu.com');

注：

你可以使用 * 来指代所有的 URL。例如，我们可以使用如下代码设置响应头以告知浏览器允许任何 URL 访问本服务器中的资源。

res.setHeader(' Access-Control-Allow-Origin', '*');
简单请求

若客户端请求满足如下条件，则可视该次请求为简单请求。

  1. 使用如下请求方式之一向服务器端发起请求

    • GET
    • POST
    • HEAD

  2. 使用如下请求头中的部分或全部向服务器端发起请求

    • Accept
    • Accept-Language
    • Content-Language
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
    • Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一)

注：

如果你的请求方式不满足简单请求的要求，在默认情况下，该次请求将失败。

举个栗子：

客户端代码：

在这次请求过程中，我们将使用不在简单请求中的 DELETE 请求方式向服务器端发送请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
</head>
<body>

    <!-- 设置按钮用于发送 AJAX 请求 -->
    <button id="btn">DELETE</button>

    <!-- 导入 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        // 为按钮绑定点击事件，在点击按钮后将向服务器发送 DELETE 请求
        $('#btn').on('click', function() {
            $.ajax({
                type: 'DELETE',
                url: 'http://127.0.0.1:9090',
                // 在接收到服务器端的响应信息后在浏览器控制台中打印响应信息
                success: (res) => {
                    console.log(res);
                }
            })
        })

    </script>
</body>
</html>

服务器端代码：

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由处理客户端发送的 DELETE 请求
app.delete('/', (req, res) => {
    // 设置 CORS 响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 对客户端进行响应
    res.send('Hello World');
})

执行结果：

执行结果
分析：

虽然，我们已经将 Access-Control-Allow-Origin 响应头设置为 * ，但客户端仍然无法正常接收服务端发出的响应。这是由于我们使用了不在简单请求范围内的请求方式 DELTET 。

预检请求

若客户端使用不在简单请求范围内的请求头或请求方式，那么该请求属于预检请求。

我们可以通过设置响应头 Access-Control-Allow-Headers 来允许客户端使用简单请求中不包括的请求头；通过使用 Access-Control-Allow-Methods 来允许客户端请求简单请求中不包括的请求方式。
Access-Control-Allow-Headers 与 Access-Control-Allow-Origin 均可以通过通配符 * 来允许客户端使用任何简单请求不允许的请求方式或响应头。

现在让我们修改服务器端的代码以使客户端可以接收到发出的 DELETE 请求的服务器端响应。

服务器端代码：

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由以处理客户端的 DELETE 请求
app.delete('/', (req, res) => {
    // 允许向服务器发送跨送请求
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许向服务器发送 DELETE 请求
    res.setHeader('Access-Control-Allow-Methods', 'DELETE');
    // 对客户端的请求进行响应
    res.send('Hello World');
})

执行结果：

错误信息

预检请求包含的两次请求

在前面的示例中，我们明明已经设置了相关的响应头，可浏览器的控制台的错误输出信息却告知我们没有设置 Access-Control-Allow-Origin 响应头来允许客户端进行跨域请求。
我们是否可以猜测服务器端的 DELETE 路由并没有执行，使用如下服务器端代码来对此进行验证。

验证：

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由以处理客户端的 DELETE 请求
app.delete('/', (req, res) => {
    // 在接收到 DELETE 请求后向服务器终端打印信息
    console.log('【已接收到客户端发出的 DELETE 请求】');
    // 允许向服务器发送跨送请求
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许向服务器发送 DELETE 请求
    res.setHeader('Access-Control-Allow-Methods', 'DELETE');
    // 对客户端的请求进行响应
    res.send('Hello World');
})

执行结果：

在服务器端执行该段代码后，在客户端向服务器端发出 DELETE 请求后，服务器终端中并没有输出信息 【已接收到客户端发出的 DELETE 请求】 ，这表明我们的猜想是正确的。

原因：

出现这种现象的原因是因为预检请求共包含两次请求，一次是 options 请求，即预检请求，该请求由浏览器自动发送；一次是正式请求。
预检请求将在正式请求发起前发送，预检请求将向服务器询问服务器端是否允许某某类型的预检请求（由正式请求使用的请求方式及请求头决定），如果服务器端允许这类预检请求，客户端将发送正式请求。否则客户端将不会正常发送正式请求。

我们可以通过浏览器的开发者工具中的 网络 分栏来对此进行验证：

开发者工具之网路分栏

在这里你将能够观察到当前网页向服务器端收发数据包的情况。在进入该界面后，通过前述客户端程序向服务器端发送 DELETE 请求。你将得到与以下内容类似的内容。

预检请求

可以看到，在末尾多出了两条记录：

记录

最后一条记录即为预检请求。点击该条记录可以发现该请求属于 OPTIONS 请求。

预检请求

解决

由于预检请求将先于我们需要发送的 DELETE 请求，所以服务器端的 DELETE 路由并没有执行修改响应头的相关代码（路由没有与请求成功匹配）。这也就导致客户端浏览器认为服务器端不允许该类型的预检请求，最终导致正式请求没有成功发送。

全局中间件：

要解决该问题，我们可以设置一个专门用于修改响应头部的中间件函数，并将该中间件函数注册为全局中间件。

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置一个专门用于修改响应头部的中间件函数并
// 将该函数注册为全局中间件。
// 全局中间件将对所有类型的客户端请求进行预处理，
// 并在处理完成后将该请求交给相关的路由。
app.use((req, res, next) => {
    // 允许向服务器发送跨送请求
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许向服务器发送 DELETE 请求
    res.setHeader('Access-Control-Allow-Methods', 'DELETE');
    next();
})

// 设置路由以处理客户端的 DELETE 请求
app.delete('/', (req, res) => {
    // 对客户端的请求进行响应
    res.send('Hello World');
})

在将服务器端代码修改为上述内容并执行后，向服务器端发起 DELETE 请求，你将在客户端浏览器控制台中观察到如下内容：

内容

OPTIONS 路由：

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由以处理客户端的 DELETE 请求
app.delete('/', (req, res) => {
    // 允许向服务器发送跨送请求
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许向服务器发送 DELETE 请求
    res.setHeader('Access-Control-Allow-Methods', 'DELETE');
    // 对客户端的请求进行响应
    res.send('Hello World');
})

// 设置路由以处理客户端的 OPTIONS 请求
app.options('/', (req, res, next) => {
    // 允许向服务器发送跨送请求
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 允许向服务器发送 DELETE 请求
    res.setHeader('Access-Control-Allow-Methods', 'DELETE');
    next();
})

注：

请注意为处理预检请求的路由及正式请求的路由设置 CORS 相关的请求头，否则你将在客户端浏览器控制台中观察到如下错误信息。

错误信息

CORS 中间件

NodeJS 的相关包管理器提供了实现 CORS 的第三方中间件，如果你使用的是 npm（NodeJS Package Manager） 包管理器，那么你可以通过在终端中输入如下命令来对 cors 中间件进行下载安装。

npm install cors
使用 CORS 中间件处理跨域请求

客户端

我们仍将使用发起 DELETE 请求的客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
</head>
<body>

    <!-- 设置按钮用于发送 AJAX 请求 -->
    <button id="btn">DELETE</button>

    <!-- 导入 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
        // 为按钮绑定点击事件，在点击按钮后将向服务器发送 DELETE 请求
        $('#btn').on('click', function() {
            $.ajax({
                type: 'DELETE',
                url: 'http://127.0.0.1:9090',
                // 在接收到服务器端的响应信息后在浏览器控制台中打印响应信息
                success: (res) => {
                    console.log(res);
                }
            })
        })

    </script>
</body>
</html>

服务器端

const express = require('express');
// 导入 CORS 中间件
const cors = require('cors');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 将 CORS 中间件注册为全局中间件
app.use(cors());

// 设置路由以处理客户端的 DELETE 请求
app.delete('/', (req, res) => {
    // 对客户端的请求进行响应
    res.send('Hello World');
})

执行结果：

执行结果

JSONP

JSONP 全称 JSON with Padding ，译为 携带数据的 JSON ，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。

在进行 Ajax 请求时，由于同源策略的影响，不能进行跨域请求，而 script 标签的 src 属性却可以加载跨域的 JavaScript 脚本，JSONP 就是利用这一特性实现的。与普通的 Ajax 请求不同，在使用 JSONP 进行跨域请求时，服务器不再返回 JSON 格式的数据，而是返回一段调用某个函数的 JavaScript 代码。script 标签接收到响应数据后，会将其立即执行。

JSONP 的优点是兼容性好，在一些老旧的浏览器种也可以运行，但它的缺点也非常明显，那就是只能进行 GET 请求。

通过原生 JS 向服务器端发起 JSONP 请求

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
</head>
<body>

    <!-- 定义一个函数用于接收服务器端传输的数据 -->
    <script>
        function func(data){
            console.log(data);
        }
    </script>

    <!-- 通过 script 标签的 src 属性以 JSONP 的请求方式向服务器端发起请求 -->
    <script src="http://127.0.0.1:9090/?callback=func"></script>
</body>
</html>

客户端

const express = require('express');

const app = express();
// 监听本机 9090 端口
app.listen(9090);

// 设置路由以对 GET 请求进行处理
app.get('/', (req, res) => {
    // 获取查询字符串中 callback 参数对应的参数值
    const callback = req.query.callback;
    // 定义需要发送至客户端的数据
    const raw = {name: 'RedHeart', age: 18};
    // 对字符串进行拼接并将需要发送的数据转化为 JSON 格式的字符串
    const data = `${callback}(${JSON.stringify(raw)})`;
    // 对客户端进行响应
    res.send(data);
})

执行结果：

执行结果

注：

  1. 服务器端将对客户端的 JSONP 请求响应一个函数，客户端接收到该函数后将立即执行该函数。我们可以通过预先设置同名函数来接收服务器端发送的数据。
  2. 位于服务器端的 `${callback}(${JSON.stringify(raw)})` 这段代码两端的符号为 反引号 而不是 单引号，请注意。

通过 jQuery 向客户端发起 JSONP 请求

该方式所用到的服务器端代码与上一个示例相同，因此这里不再重复给出。

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端</title>
</head>
<body>
    <button id="btn">JSONP</button>
    
    <!-- 通过 CDN 导入 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script>
        $('#btn').on('click', () => {
            $.ajax({
                method: 'GET', 
                dataType: 'JSONP',
                url: 'http://127.0.0.1:9090',
                success: (res) => {
                    console.log(res);
                }
            })
        })
    </script>
</body>
</html>

执行结果

在执行上述代码后，点击页面中的按钮后，你将在浏览器控制台中观察到如下数据。
执行结果

注：

虽然在上述代码中我们使用了 $.ajax() 函数，但这并不表示 JSONP 请求使用了 AJAX 技术。事实上，JSONP 请求并没有利用 AJAX 技术，仅仅只是采用了 GET 类型的请求方式。

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

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

相关文章

mysql:如何在windows环境下配置并随意切换两种mysql版本

mysql:如何在windows环境下配置并随意切换两种mysql版本

系列文章目录 文章目录系列文章目录前言一、去官网下载zip安装包二、配置创建my.ini文件2.环境变量3、使用管理员身份打开dos命令窗口4、安装mysql8的服务和初始化data5、启动6 错误解决&#xff1a;修改mysql8服务的注册表最后前言 之前安装过5.7的版本 后来由于需要 就安装了…
阅读更多...
天龙八部TLBB从0到1搭建教程-上

天龙八部TLBB从0到1搭建教程-上

服务器的配置选择与购买 我们需要准备的东西，是环境安装和4核8G的服务器一台。 其实购买服务器的地方很多以下这些服务商都可以，具体看服务器的配置选择，像这种4核8G的 服务器价格在260-400之间一台仅供参考，当然还有带防的服务器价格就偏高了阿里云、腾讯、百度、西部数码…
阅读更多...
年后公司新来一00后卷王，我们这帮老油条真干不过.....

年后公司新来一00后卷王，我们这帮老油条真干不过.....

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;我们公司来了个00后&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 2023年春…
阅读更多...
MySQL深分页 + 多字段排序场景的优化方案【三百万级数据量】

MySQL深分页 + 多字段排序场景的优化方案【三百万级数据量】

需求背景 目前产品需要针对一个大范围地区内的所有用户做排行榜功能&#xff0c;且这个排行榜有几个比较蛋疼的附加需求&#xff1a; 排行榜需要全量展示所有用户&#xff0c;且做分页展示&#xff08;大坑&#x1f4a5;&#xff09; 排行榜有4种排序条件&#xff0c;且每个排…
阅读更多...
fatal error怎么解决，有什么快捷的解决方法

fatal error怎么解决，有什么快捷的解决方法

fatal error怎么解决&#xff0c;其实是有多种的解决方法的&#xff0c;主要是看你想用哪种解决方法去进行解决&#xff0c;下面一起来看看。 一.fatal error的解决方法 1、按winR&#xff0c;弹出运行窗口。 2、输入regedit点击确定&#xff0c;弹出注册表编辑器。 3、在注…
阅读更多...
2023年数据库优化顶级原理

2023年数据库优化顶级原理

毫不夸张的说咱们后端工程师&#xff0c;无论在哪家公司&#xff0c;呆在哪个团队&#xff0c;做哪个系统&#xff0c;遇到的第一个让人头疼的问题绝对是数据库性能问题。如果我们有一套成熟的方法论&#xff0c;能让大家快速、准确的去选择出合适的优化方案&#xff0c;我相信…
阅读更多...
Acwing-1116. 马走日

Acwing-1116. 马走日

本题求有多少路径遍历棋盘上的所有点&#xff0c;属于外部搜索&#xff0c;所以需要回溯。另外&#xff0c;对于递归终止条件&#xff0c;我们添加一个参数用来表示当前遍历到第几个点&#xff0c;如果是n*m表明已经将棋盘遍历一遍了&#xff0c;方案数1&#xff0c;return即可…
阅读更多...
Linux常用命令——screen命令

Linux常用命令——screen命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) screen 用于命令行终端切换 补充说明 Screen是一款由GNU计划开发的用于命令行终端切换的自由软件。用户可以通过该软件同时连接多个本地或远程的命令行会话&#xff0c;并在其间自由切换。GNU Screen可以看作是…
阅读更多...
Linux学习笔记本（不定期持续更新）

Linux学习笔记本（不定期持续更新）

一、概述 2023年&#xff0c;打算系统自学一遍Linux&#xff0c;分享到这里来&#xff0c;和大家一起相互学习&#xff0c;探讨。 二、Linux基础知识 Linux学习环境搭建学习每一门技术&#xff0c;系统环境很重要&#xff0c;好的系统环境能够极大提高学习效率。学习Linux也是一…
阅读更多...
33. 实战：实现某网站店铺信息的查询与批量抓取（附源码）

33. 实战：实现某网站店铺信息的查询与批量抓取（附源码）

目录 前言 目的 思路 代码实现 1. 请求URL&#xff0c;获取源代码 2. 解析源代码&#xff0c;获取数据 3. 完善保存数据的函数save_data 4. 理清main函数逻辑&#xff0c;循环传递每一页有效信息的参数 完整代码 运行效果 总结 前言 近日&#xff0c;我们每周四都能…
阅读更多...
ESP-C3入门5. 使用通用计时器

ESP-C3入门5. 使用通用计时器

ESP-C3入门5. 使用通用计时器一、 简介二、使用步骤三、操作函数1. 基本操作&#xff08;1&#xff09;定时器实例 gptimer_handle_t &#xff08;2&#xff09; 定时器配置结构体 gptimer_config_t&#xff08;3&#xff09; 定时器初始化 timer_init()&#xff08;3&#xff…
阅读更多...
探索 Vue.js 中引用的力量：访问和操作 DOM 元素”

探索 Vue.js 中引用的力量：访问和操作 DOM 元素”

0.简介 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它由 Evan You 于 2014 年创建&#xff0c;此后作为构建 Web 应用程序的工具越来越受欢迎。 Vue 的核心特性包括&#xff1a; 反应式数据绑定&#xff1a;Vue 使用反应式系统来跟踪对数据模型的更改并自动更新…
阅读更多...
22年部署之docker学习

22年部署之docker学习

以下记录的是&#xff0c;我在学习中的一些学习笔记&#xff0c;这篇笔记是自己学习的学习大杂烩&#xff0c;主要用于记录&#xff0c;方便查找https://hub.docker.com/ 镜像中心Docker 常用命令&#xff1a; docker 运行相关运行&#xff1a; service docker start停止&#…
阅读更多...
【三年面试五年模拟】算法工程师的独孤九剑秘籍（前十二式汇总篇）V1版

【三年面试五年模拟】算法工程师的独孤九剑秘籍（前十二式汇总篇）V1版

写在前面 【三年面试五年模拟】栏目专注于分享AI行业中实习/校招/社招维度的必备面积知识点与面试方法&#xff0c;并向着更实战&#xff0c;更真实&#xff0c;更从容的方向不断优化迭代。也欢迎大家提出宝贵的意见或优化ideas&#xff0c;一起交流学习&#x1f4aa; 大家好&a…
阅读更多...
ABB机器人系统输入输出信号System Input和Output详解（一）

ABB机器人系统输入输出信号System Input和Output详解（一）

ABB机器人系统输入输出信号System Input和Output详解 System Input类型： 输入I／O信号可指定具体的系统输入项，比如Start或Motors on。该输入项会在不使用FlexPendant示教器或其它硬件装置的情况下触发一项交由系统处理的系统行动。 可以用一个PLC来触发相应的系统输入项。 注…
阅读更多...
Node.js教程笔记（三）express

Node.js教程笔记（三）express

学习目标 能够使用express.static()快速托管静态资源 能够使用express路由精简项目结构 能够使用常见的express中间件 能够使用express创建API接口 能够在express中启用cors跨域资源共享 目录 初识Express Express路由 Express中间件 使用Express写接口 1、初识Expres…
阅读更多...
【通信原理（含matlab程序）】实验三 数字基带信号及其频谱特性

【通信原理（含matlab程序）】实验三 数字基带信号及其频谱特性

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; 本人持续分享更多关于电子通信专业内容以及嵌入式和单片机的知识&#xff0c;如果大家喜欢&#xff0c;别忘点个赞加个关注哦&#xff0c;让我们一起共同进步~ &#x…
阅读更多...
Android OpenCV（二）主体识别 位置检测

Android OpenCV（二）主体识别 位置检测

前言 工作中遇到需要通过OpenCV找到图片主体体积占图片百分比的比例&#xff0c;这里做一个问题解决思路的记录。该方面新手小白&#xff0c;有不对的地方可以评论指出哈 。 重要API Sobel算法 Sobel 计算参考文章 索贝尔算子是计算机视觉领域的一种重要处理方法。 主要用于…
阅读更多...
内网传输——解决物联网信息安全和隐私保护问题

内网传输——解决物联网信息安全和隐私保护问题

与普通电脑系统不同&#xff0c;物联网建立在嵌入式系统的基础之上&#xff0c;其通信协议因设备和应用程序而异。目前还没有一个统一的中央系统来构建安全措施&#xff0c;那么&#xff0c;在企业物联网实际应用中&#xff0c;如何保证信息安全&#xff1f;物联网生态系统的安…
阅读更多...
OpenHarmony社区运营报告（2022年12月）

OpenHarmony社区运营报告（2022年12月）

本月快讯• 本月新增22款产品通过兼容性测评&#xff0c;累计220款产品通过兼容性测评。• 12月28日&#xff0c;OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;凭借其创新的技术特性和开源生态建设成果&#xff0c;荣膺“InfoQ 2022年度十大开源新锐项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023