【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题

news2024/11/14 6:03:16

目录

  • 引言
  • 一、同源策略（Same-Origin Policy）概述
      • 1.1 同源策略的定义
      • 1.2 同源策略的作用
  • 二、CORS 的引入与工作原理
    • 2.1 CORS（跨域资源共享）的基本概念
    • 2.2 简单请求与预检请求
      • 2.2.1 简单请求（Simple Requests）
      • 2.2.2 预检请求（Preflight Request）
    • 2.3 预检请求流程
  • 三、CORS 相关 HTTP 头部
    • 3.1 `Access-Control-Allow-Origin`
    • 3.2 `Access-Control-Allow-Methods`
    • 3.3 `Access-Control-Allow-Headers`
    • 3.4 `Access-Control-Allow-Credentials`
    • 3.5 `Access-Control-Expose-Headers`
    • 3.6 `Access-Control-Max-Age`
  • 四、跨域请求的类型
    • 4.1 简单请求
    • 4.2 预检请求
  • 五、处理跨域问题的常见方式
    • 5.1 前端（JavaScript）处理 CORS
      • 5.1.1 使用 `fetch` 发起跨域请求
      • 5.1.2 使用 `XMLHttpRequest` 发起跨域请求
    • 5.2 Node.js 中处理 CORS
      • 5.2.1 使用 `cors` 中间件
      • 5.2.2 使用自定义 CORS 头部
    • 5.3 Python 中处理 CORS
      • 5.3.1 安装 `Flask-CORS`
      • 5.3.2 配置 CORS
    • 5.4 Go 语言中处理 CORS
      • 5.4.1 使用 `gorilla/handlers`
  • 六、CORS 处理流程图
  • 七、CORS 常见问题
    • 7.1 `Access-Control-Allow-Origin` 设置问题
    • 7.2. 预检请求失败
    • 7.3 带凭证的请求问题
    • 7.4 跨域请求的缓存问题
    • 7.5 使用代理解决跨域
  • 总结

引言

在现代 Web 开发中，跨域请求已经成为不可避免的一部分。浏览器的同源策略（Same-Origin Policy）虽然提供了基本的安全保障，但也限制了不同域之间的数据交互。为了弥补这一限制，CORS（Cross-Origin Resource Sharing，跨域资源共享）应运而生。CORS 是浏览器的一项安全机制，允许从一个域名（如前端页面的域）发起跨域请求，从而访问其他域名（如后端 API）的资源。通过这一机制，Web 应用可以灵活地访问跨域的资源，同时确保用户数据的安全。

本文将详细介绍 CORS 的工作原理、涉及的 HTTP 头部、跨域请求的不同类型以及如何在前后端开发中正确配置 CORS，帮助开发者更好地理解和解决常见的跨域问题。

一、同源策略（Same-Origin Policy）概述

1.1 同源策略的定义

浏览器的同源策略（Same-Origin Policy）是一种重要的安全机制，用于阻止不同源（域）之间的恶意操作。根据同源策略，网页中的脚本只能访问与其所在网页相同源的资源。源的定义包括三个主要部分：

  • 协议（Scheme）：如 http:// 或 https://；
  • 主机（Host）：如 www.example.com 或 api.example.com；
  • 端口（Port）：如 80 或 8080。

如果请求的协议、主机名或端口号不一致，浏览器将视为跨域请求，默认会阻止这样的访问。例如：

  • http://example.com 和 https://example.com 属于不同来源（协议不同）；
  • http://example.com 和 http://api.example.com 属于不同来源（主机名不同）；
  • http://example.com:80 和 http://example.com:8080 属于不同来源（端口不同）。

1.2 同源策略的作用

同源策略的核心目的是保护用户的数据隐私和安全，避免恶意网站通过脚本发起未经授权的请求，从而窃取或篡改用户的数据。例如：

  • 一个恶意网站可能试图通过 JavaScript 脚本访问银行网站，获取用户的敏感信息如账户余额或信用卡号码。
  • 如果没有同源策略的保护，网站之间的数据交换将可能面临被恶意操控的风险。

二、CORS 的引入与工作原理

由于同源策略对跨域资源共享的限制，前端开发中常常需要访问不同域的资源，比如从 www.example.com 向 api.example.com 请求数据。为了能够安全、灵活地进行跨域通信，CORS（跨域资源共享）机制应运而生。

2.1 CORS（跨域资源共享）的基本概念

CORS（Cross-Origin Resource Sharing） 是一种机制，允许受限的资源在一个域（域A）上被另一个域（域B）请求。CORS 通过在 HTTP 请求中添加额外的头部信息来实现跨域通信，从而解决了浏览器的同源策略限制。

同源策略（Same-Origin Policy）
浏览器的同源策略（Same-Origin Policy）是一种用于防止不同来源的网页互相干扰的机制。它要求，网页中的脚本只能访问与它相同源的资源。换句话说，不同域名、协议或端口的资源访问会被浏览器默认阻止。

同源的定义：

  • 相同的协议（http:// 与 https://）
  • 相同的主机名（www.example.com 与 example.com）
  • 相同的端口号（80与8080）

如果协议、主机名或端口号不相同，则被视为跨域请求。

CORS 的核心思想是，服务器通过在 HTTP 响应头中设置特定字段，来允许或拒绝跨域请求。CORS 并不改变浏览器的同源策略，而是通过配置来放宽限制。

2.2 简单请求与预检请求

根据请求类型，CORS 分为两种情况：简单请求和预检请求。

2.2.1 简单请求（Simple Requests）

简单请求是指那些符合以下条件的跨域请求：

  • 请求方法是 GET、POST 或 HEAD；
  • 请求头部只包含以下字段之一：Accept、Content-Type（只限 application/x-www-form-urlencoded、multipart/form-data 和 text/plain），Authorization 等常见字段。

对于这种请求，浏览器会直接发送请求到服务器，并且不发送预检请求。

2.2.2 预检请求（Preflight Request）

如果跨域请求方法是 PUT、DELETE、PATCH，或者请求中包含自定义的 HTTP 头部（如 X-Custom-Header），浏览器首先会发送一个 OPTIONS 请求来询问服务器是否允许跨域请求。该请求被称为“预检请求”。服务器需要在响应中包含允许跨域访问的标识，浏览器才会继续发送实际的请求。

2.3 预检请求流程

在进行跨域请求时，浏览器通常会先发送一个预检请求（OPTIONS 请求）以确定服务器是否允许跨域访问。预检请求的流程如下：

  1. 浏览器发送 OPTIONS 请求：浏览器向服务器发送一个 OPTIONS 请求，询问服务器是否支持跨域请求。
  2. 服务器响应 CORS 头部信息：服务器根据请求的内容，在响应头中添加 CORS 相关的字段，告知浏览器是否允许跨域请求。
  3. 判断是否允许跨域请求：浏览器根据服务器返回的 CORS 头部信息，判断是否允许继续发送实际的跨域请求。
  4. 发送实际请求或报错：
    • 如果服务器允许，浏览器会继续发送实际请求。
    • 如果服务器不允许，浏览器会拒绝请求并抛出 CORS 错误。
是
否
CSDN @ 2136
浏览器发送 OPTIONS 请求
服务器响应 CORS 头部信息
是否允许跨域请求?
浏览器发送实际请求
浏览器拒绝请求, 提示 CORS 错误
服务器响应实际请求
浏览器处理并显示响应
CSDN @ 2136

说明：

  1. 浏览器发送 OPTIONS 请求：浏览器首先发送一个 OPTIONS 请求到服务器，以询问是否允许跨域请求。
  2. 服务器响应 CORS 头部信息：服务器在响应中包含 Access-Control-Allow-Origin 等 CORS 相关头部，告知浏览器是否允许跨域。
  3. 判断是否允许跨域请求：
    • 如果服务器允许跨域，浏览器会发送实际请求。
    • 如果服务器不允许，浏览器会拒绝请求，并报出 CORS 错误。
  4. 发送实际请求或拒绝：
    • 如果允许，浏览器继续发出实际请求。
    • 如果不允许，浏览器会显示 CORS 错误。
  5. 服务器响应实际请求：如果跨域请求被允许，服务器会正常响应实际请求。
  6. 浏览器处理并显示响应：浏览器接收并处理服务器返回的数据，最后展示给用户。

通过上述流程，浏览器能够确保服务器允许跨域请求，从而安全地进行数据交换。

三、CORS 相关 HTTP 头部

CORS 主要依赖服务器端的 HTTP 头部来进行配置。以下是常见的 CORS 相关头部字段及其作用：

  • Access-Control-Allow-Origin：指定哪些源（域）可以访问资源。可以是单个源，或者是 *（允许所有源）。
  • Access-Control-Allow-Methods：指定允许的 HTTP 方法（如 GET, POST, PUT, DELETE 等）。
  • Access-Control-Allow-Headers：指定允许的请求头字段。
  • Access-Control-Allow-Credentials：指示是否允许发送凭据（如 cookies）到跨域资源。
  • Access-Control-Expose-Headers：允许客户端访问特定的响应头。
  • Access-Control-Max-Age：指示预检请求的有效期，即多少秒内无需再次发送预检请求。

3.1 Access-Control-Allow-Origin

  • 作用：指定哪些源（域）可以访问该资源。可以是单个域名，也可以是 *，表示允许所有来源。
  • 值：
    • 单个域名：Access-Control-Allow-Origin: https://www.example.com
    • 允许所有来源：Access-Control-Allow-Origin: *
    • 如果允许的来源是动态的，服务器可以根据请求的 Origin 动态返回允许的域名。

3.2 Access-Control-Allow-Methods

  • 作用：指定允许的 HTTP 请求方法。
  • 常见值：GET, POST, PUT, DELETE, PATCH

3.3 Access-Control-Allow-Headers

  • 作用：指定哪些请求头字段可以包含在实际请求中。例如，某些自定义请求头，如 X-Custom-Header，需要通过这个字段允许。
  • 示例：Access-Control-Allow-Headers: Content-Type, X-Custom-Header

3.4 Access-Control-Allow-Credentials

  • 作用：指示是否允许发送凭据（如 cookies）。如果设置为 true，表示跨域请求中可以发送 cookies。
  • 值：true 或 false。
  • 注意：当设置为 true 时，Access-Control-Allow-Origin 不能为 *，必须指定具体的域名。

3.5 Access-Control-Expose-Headers

  • 作用：允许浏览器访问指定的响应头。默认情况下，浏览器只会暴露某些标准的响应头，使用该字段可以暴露其他自定义的头部。
  • 示例：Access-Control-Expose-Headers: X-Response-Time

3.6 Access-Control-Max-Age

  • 作用：指定预检请求的有效期（单位为秒）。在此期间，浏览器不会再次发送预检请求。
  • 示例：Access-Control-Max-Age: 3600 表示预检请求的结果有效期为 1 小时。

四、跨域请求的类型

4.1 简单请求

  • GET、POST、HEAD 方法
  • 头部字段限制：只允许常见的头部字段，如 Accept、Content-Type、Authorization 等。

4.2 预检请求

  • 如果请求方法是 PUT、DELETE、PATCH，或者包含自定义头部字段，浏览器会先发送一个 OPTIONS 请求（预检请求）询问服务器是否允许跨域操作。

五、处理跨域问题的常见方式

以下分别展示在前端、Node.js、Python 和 Go 中处理跨域请求的代码示例，并对其进行详细说明。

5.1 前端（JavaScript）处理 CORS

在前端代码中，通常通过设置 fetch 或 XMLHttpRequest 的 mode、credentials 等选项来控制跨域行为。

5.1.1 使用 fetch 发起跨域请求

fetch('https://example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  // 是否允许携带 cookies
  credentials: 'include', // 'same-origin', 'include', 'omit'
})
.then(response => {
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});
  • credentials: 'include'：允许携带 cookies。如果目标服务器配置了 CORS 头部 Access-Control-Allow-Credentials: true，浏览器才会发送带有 cookies 的跨域请求。

5.1.2 使用 XMLHttpRequest 发起跨域请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.withCredentials = true; // 设置是否带上凭证
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

5.2 Node.js 中处理 CORS

在 Node.js 中，处理 CORS 最常见的方式是使用 cors 中间件，它能简化 CORS 相关的配置。

5.2.1 使用 cors 中间件

首先，需要安装 cors：

npm install cors

然后在代码中引入并使用它：

const express = require('express');
const cors = require('cors');
const app = express();

// 使用 cors 中间件
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 允许的来源
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true // 允许携带凭证
}));

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

5.2.2 使用自定义 CORS 头部

如果不使用 cors 中间件，可以手动添加 CORS 头部：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-frontend-domain.com'); // 允许的源
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

5.3 Python 中处理 CORS

在 Python 中，可以使用 Flask-CORS 扩展来处理 CORS。

5.3.1 安装 Flask-CORS

pip install flask-cors

5.3.2 配置 CORS

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins="https://your-frontend-domain.com", supports_credentials=True)

@app.route("/data")
def data():
    return {"message": "Hello World"}

if __name__ == "__main__":
    app.run(port=5000)

5.4 Go 语言中处理 CORS

在 Go 中，可以通过 gorilla/handlers 或 net/http 来处理 CORS。

5.4.1 使用 gorilla/handlers

首先安装 gorilla/handlers：

go get github.com/gorilla/handlers

然后配置 CORS：

package main

import (
	"fmt"
	"github.com/gorilla/mux"
	"github.com/gorilla/handlers"
	"net/http"
)

func main() {
	r := mux.NewRouter()
	r.HandleFunc("/data", func(w http.ResponseWriter, r *http.Request) {
		w.Write([]byte(`{"message": "Hello World"}`))
	}).Methods("GET")

	// 配置 CORS
	headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"})
	originsOk := handlers.AllowedOrigins([]string{"https://your-frontend-domain.com"})
	methodsOk := handlers.AllowedMethods([]string{"GET", "POST", "PUT", "DELETE"})

	// 启动服务器
	http.ListenAndServe(":3000", handlers.CORS(originsOk, headersOk, methodsOk)(r))
}

六、CORS 处理流程图
是
否
成功
失败
CSDN @ 2136
前端请求资源
浏览器发送请求
浏览器检测是否跨域
是否跨域?
发送预检请求 OPTIONS
直接发送请求
服务器检查预检请求并返回 CORS 响应头
浏览器继续发送实际请求
浏览器阻止实际请求并报告错误
服务器处理请求并返回数据
浏览器接受响应
渲染页面
浏览器反馈 CORS 错误
CSDN @ 2136

解释：

  • 前端请求资源：前端应用（例如一个网页）发出请求，可能会向不同的域、协议或端口请求资源，导致跨域。

  • 浏览器发送请求：浏览器会发起 HTTP 请求，向服务器请求所需资源。

  • 浏览器检测是否跨域：浏览器根据请求的目标 URL 判断请求是否跨域。如果目标 URL 与当前网页 URL 的域、协议或端口不同，则认为是跨域请求。

  • 是否跨域：这是判断跨域请求与否的关键节点。如果请求和当前页面的源不同，则会触发 CORS 机制。

    • 是跨域：浏览器会发送一个预检请求（Preflight Request）。这是一个 HTTP 请求，用于询问目标服务器是否允许跨域访问，通常是一个 OPTIONS 请求。

    • 否跨域：如果请求没有跨域，浏览器会直接发送请求，不经过预检过程。

  • 发送预检请求（OPTIONS）：如果是跨域请求，浏览器会先发送一个 OPTIONS 请求，询问服务器是否允许跨域操作。

  • 服务器检查预检请求并返回 CORS 响应头：服务器收到预检请求后，会根据 CORS 配置返回相应的 CORS 头部信息，如 Access-Control-Allow-Origin 和其他相关字段。如果服务器允许该请求，浏览器继续发送实际的请求。

  • 服务器处理请求并返回数据：如果预检请求成功，浏览器会发出实际的跨域请求。服务器处理请求并返回数据。

  • 浏览器接受响应：浏览器接收到响应后，会检查 CORS 头部，确认是否允许访问资源。如果允许，则进行页面渲染；如果不允许，则阻止该请求。

  • 渲染页面：如果响应没有问题，浏览器会将数据渲染到页面上，展示给用户。

  • 浏览器反馈 CORS 错误：如果预检请求失败，或者响应头中缺少必要的 CORS 信息，浏览器会终止请求并提示 CORS 错误。

七、CORS 常见问题

7.1 Access-Control-Allow-Origin 设置问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource：表示响应中缺少 Access-Control-Allow-Origin 头部。
描述：
- Access-Control-Allow-Origin 是 CORS 头部中的关键字段，用来指定允许跨域访问的来源（即允许哪些域名访问资源）。如果响应中没有该字段或该字段的值不匹配请求的来源，浏览器会阻止跨域请求。报错为：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource。

解决方案：

  • 服务器可以通过返回该头部来明确哪些域名被允许跨域访问。可以指定单一域名（如 https://example.com），或者使用通配符 * 允许所有域名访问，但通配符不能与带凭证的请求（如 cookies 或 Authorization 头部）一起使用，也不能与 credentials: 'include' 一起使用。
  • 如果多个域名都需要访问，服务器可以动态判断请求来源，并根据来源返回不同的 Access-Control-Allow-Origin 值。

示例：

Access-Control-Allow-Origin: https://example.com
  • 如果允许所有域访问：
Access-Control-Allow-Origin: *

注意：

  • 通配符 * 不能与带凭证的请求（例如 cookies、Authorization）一起使用。如果请求需要凭证，服务器必须指定明确的来源（域名）。即 Access-Control-Allow-Origin 必须设置为明确的域名，而不能使用 *。

7.2. 预检请求失败

描述：

  • 对于某些复杂的请求（如 PUT、DELETE，或包含自定义头部的请求），浏览器会首先发送一个 OPTIONS 预检请求，以确认服务器是否接受跨域请求。如果服务器没有正确响应或缺少必需的 CORS 头部，实际请求会被浏览器阻止。报错为：
    CORS policy: Response to preflight request doesn’t pass access control check。

解决方案：

  • 服务器需要正确处理 OPTIONS 请求，并返回适当的 CORS 响应头。常见的响应头包括：
  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods（指定允许的 HTTP 方法，如 GET, POST, PUT, DELETE 等）
  • Access-Control-Allow-Headers（列出允许的自定义头部）

示例：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

7.3 带凭证的请求问题

描述：

  • 当浏览器在请求中包含凭证（如 cookies 或 Authorization 头部）时，CORS 请求需要显式的配置来允许凭证一起发送。如果服务器没有设置 Access-Control-Allow-Credentials，浏览器会拒绝携带凭证的请求。可能出现以下错误：
    Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’。

解决方案：

  • 当浏览器携带凭证（如 cookies 或 Authorization）发起跨域请求时，服务器需要在响应中设置 Access-Control-Allow-Credentials: true，并且 Access-Control-Allow-Origin 不能使用通配符（*），必须指定明确的域名。

示例：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
  • 如果服务器允许携带 cookies 和其他凭证，但未正确配置 Access-Control-Allow-Credentials，浏览器将拒绝请求。

常见错误：

  • No 'Access-Control-Allow-Origin' header is present on the requested resource：这通常意味着服务器没有正确设置 Access-Control-Allow-Origin 头部。

7.4 跨域请求的缓存问题

描述：

  • 浏览器可能会缓存跨域请求的响应。如果 CORS 响应头设置不当，缓存可能导致不必要的跨域问题。

解决方案：

  • 服务器可以通过设置 Cache-Control 头部，控制缓存策略。例如，可以禁用缓存：
Cache-Control: no-store

示例：

Cache-Control: no-cache
Access-Control-Allow-Origin: https://example.com
  • 如果需要缓存响应，可以使用 no-cache，但仍需要确保正确设置 CORS 头部。

7.5 使用代理解决跨域

描述：

  • 如果由于 CORS 设置问题而无法直接访问资源，可以通过设置一个代理服务器来转发请求，从而绕过跨域限制。代理服务器会代表客户端发起请求，并返回响应数据。

解决方案：

  • 前端可以将请求发送到与页面同域的代理服务器，由代理服务器向目标服务器发起请求，再将响应返回给前端。

优点：

  • 这种方式可以避免浏览器的 CORS 限制，但增加了额外的服务器端负担。

总结

CORS 是一种重要的浏览器安全机制，解决了不同源之间资源共享的问题。无论是在前端使用 fetch 或 XMLHttpRequest 发起请求，还是在后端使用中间件或手动设置响应头部，正确的 CORS 配置对于确保跨域请求的顺利进行至关重要。通过合理配置 CORS 相关头部，开发者可以有效避免常见的跨域问题，如头部设置不正确、预检请求失败、带凭证的请求问题等。

掌握 CORS 的核心原理与配置方法，不仅能帮助开发者顺利实现跨域资源共享，还能提高 Web 应用的安全性和用户体验。如果你在开发过程中遇到任何 CORS 配置上的挑战，随时可以寻求更多的帮助和解决方案。

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

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

相关文章

Flink执行sql时报错

Flink执行sql时报错

[ERROR] Could not execute SQL statement. Reason: java.lang.ClassNotFoundException: org.apache.flink.table.planner.delegation.ParserFactory flink-1.15.4的lib里面存在flink-sql-connector-hive-3.1.2_2.12-1.15.4.jar时，似乎会跟hdfs产生冲突&#xff0c…
阅读更多...
实现API接口的自动化

实现API接口的自动化

API接口自动化测试的最佳实践有哪些？ API接口自动化测试的最佳实践包括以下几个方面： 确定测试范围和目标：明确需要测试的API接口和功能点，确定测试的目标和预期结果 编写测试用例：根据API文档和需求，编…
阅读更多...
uni-app中使用 unicloud 云开发平台③

uni-app中使用 unicloud 云开发平台③

文章目录 六、hbuilderX 中使用 unicloud 云开发平台文档传统业务开发流程什么是 unicloudunicloud 优点开发流程uncloud 构成云数据库云存储及 CDN创建云函数工程七、unicloud api 操作云函数调用云函数实现云数据库基本增删改查1. 获取数据库引用云存储操作六、hbuilderX 中使…
阅读更多...
【缓存策略】你知道 Refresh-ahead（预刷新）这个缓存策略吗？

【缓存策略】你知道 Refresh-ahead（预刷新）这个缓存策略吗？

👉博主介绍： 博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家，WEB架构师，阿里云专家博主，华为云云享专家，51CTO 专家博主 ⛪️ 个人社区：个人社区 💞 个人主页：个人主页 🙉 专栏地址： ✅ Java 中级 🙉八股文专题：剑指大厂，手撕 J…
阅读更多...
零基础Java第十六期：抽象类接口（二）

零基础Java第十六期：抽象类接口（二）

目录 一、接口（补） 1.1. 数组对象排序 1.2. 克隆接口 1.3. 浅拷贝和深拷贝 1.4. 抽象类和接口的区别 一、接口（补） 1.1. 数组对象排序 我们在讲一维数组的时候，使用到冒泡排序来对数组里的元素进行从小到大或从大…
阅读更多...
django入门【05】模型介绍（二）——字段选项

django入门【05】模型介绍（二）——字段选项

文章目录 1、null 和 blank示例说明⭐ null 和 blank 结合使用的几种情况总结： 2、choices**choices 在 Django 中有以下几种形式：**（1） **简单的列表或元组形式**（2） **字典映射形式**（3&#…
阅读更多...
数据量大Excel卡顿严重？选对报表工具提高10倍效率

数据量大Excel卡顿严重？选对报表工具提高10倍效率

当几万行的数据把软件频频跑崩，当珍贵的数据资源无法便捷复用，当数据填报的本地文档在各个电脑中传来传去……在各大岗位要求中频频出现的Excel，作为个人办公软件绝无仅有，但作为企业场景下的报表工具，效率显然不足。 …
阅读更多...
如何用WordPress和Shopify提升SEO表现？

如何用WordPress和Shopify提升SEO表现？

选择合适的建站程序对于SEO优化非常重要。目前，WordPress和Shopify是两种备受推崇的建站平台，各有优势。 WordPress最大的优点是灵活性。它支持大量SEO插件，帮助你调整元标签、生成站点地图、优化内容结构等。这些功能让你能够轻松地提升网站…
阅读更多...
vue 计算属性get set

vue 计算属性get set

<template><div id"app"><h1>用户信息</h1><p>全名&#xff1a;{{ fullName }}</p><input v-model"fullName" placeholder"请输入全名" /><p>姓&#xff1a;{{ firstName }}</p><p>…
阅读更多...
PHP搭建开发环境（Windows系统）

PHP搭建开发环境（Windows系统）

要搭建一个完整的PHP动态网站&#xff0c;离不开操作系统、Web服务器、数据库、和PHP软件。 虽然有不错方便的方式&#xff0c;比如使用phpstudio等等等等许多面板都是非常快速不错的方式&#xff0c;但是这里是教会大家如何配置而不只是依赖别人整合好的面板软件&#xff0c;…
阅读更多...
7.2 图像复原之空间滤波

7.2 图像复原之空间滤波

图像复原&#xff08;只存在噪声的复原&#xff09;之空间滤波 文章目录 图像复原&#xff08;只存在噪声的复原&#xff09;之空间滤波前言1. 均值滤波器1.1 算术平均滤波器1.2 几何均值滤波器1.3 谐波平均滤波器1.4 反谐波平均滤波器 总结 前言 当一幅图像仅被加性噪声退化时…
阅读更多...
化工防爆巡检机器人：在挑战中成长，为化工安全保驾护航

化工防爆巡检机器人：在挑战中成长，为化工安全保驾护航

随着全球能源需求的不断攀升&#xff0c;化工行业的安全性与高效性愈发受到关注。化工设施规模巨大&#xff0c;而且其中多数存在高风险因素&#xff0c;像是易燃易爆化学物质、高温环境、有毒有害物质以及高压设备等。仅2023年&#xff0c;国内危化品事故就多达652起&#xff…
阅读更多...
【数字图像处理+MATLAB】对图片进行伽马校正（Gamma Correction）：使用幂律变换公式进行伽马变换

【数字图像处理+MATLAB】对图片进行伽马校正（Gamma Correction）：使用幂律变换公式进行伽马变换

引言 伽马校正&#xff08;Gamma Correction&#xff09;是一种用于图像处理的技术&#xff0c;主要用于调整图像的亮度或对比度。其基本原理是对图像的每一个像素应用一个非线性变换&#xff0c;以更好地适应人眼的视觉感知。在数字图像处理中&#xff0c;伽马校正通常用于调…
阅读更多...
scala 迭代更新

scala 迭代更新

在Scala中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一种用于遍历集合&#xff08;如数组、列表、集合等&#xff09;的元素而不暴露其底层表示的对象。迭代器提供了一种统一的方法来访问集合中的元素&#xff0c;而无需关心集合的具体实现。 在Scala中&#xff0c…
阅读更多...
部署zabbix遇到问题: cannot find a valid baseurl for repo：centos-sclo-rh/x86 64 怎么解决 ？

部署zabbix遇到问题: cannot find a valid baseurl for repo：centos-sclo-rh/x86 64 怎么解决 ？

安装 Zabbix 前端包&#xff0c;提示cannot find a valid baseurl for repo&#xff1a;centos-sclo-rh/x86 64 安装zabbix前端包 # yum install zabbix-web-mysql-scl zabbix-apache-conf-scl 解决办法&#xff1a; 原因是&#xff1a;CentOS7的SCL源在2024年6月30日停止维护…
阅读更多...
SpringBoot（十九）创建多模块Springboot项目（完整版）

SpringBoot（十九）创建多模块Springboot项目（完整版）

之前我有记录过一次SpringBoot多模块项目的搭建，但是那一次只是做了一个小小的测试。只是把各模块联通之后就结束了。 最近要增加业务开发，要将目前的单模块项目改成多模块项目，我就参照了一下我上次搭建的流程，发现总是有报错。上次搭建的比较顺利，很多细枝末节也没有仔细…
阅读更多...
基于Python的智能无人超市管理系统

基于Python的智能无人超市管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
什么是量化交易

什么是量化交易

课程大纲 内容初级初识量化&#xff0c;理解量化 初识量化 传统量化和AI量化的区别 量化思想挖掘 量化思想的挖掘及积累技巧 量化代码基础&#xff1a; python、pandas、SQL基础语法 金融数据分析 常用金融分析方式 常用因子分析方式 数据分析实战练习 回测及交易引擎 交易引擎…
阅读更多...
xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

打开 .sh 文件所在的终端窗口&#xff0c;执行终端命令&#xff1a;sh 文件名.sh&#xff0c;出现如下错误&#xff1a; 解决办法&#xff1a;
阅读更多...
PETR/PETRv2/StreamPETR论文阅读

PETR/PETRv2/StreamPETR论文阅读

1. PETR PETR网络结构如下&#xff0c;主要包括image-backbone&#xff0c;3D Coordinates Generator&#xff0c;3D Position Encoder&#xff0c;transformer Decoder四个模块。 把N 个视角的图像输入到骨干网络中以提取 2D 多视图特征。在 3D 坐标生成器中&#xff0c;首先…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023