前端 | CORS 跨域问题解决
问题：Access to fetch at 'http://localhost:3000/save' from origin 'http://localhost:5174' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.。
分析：CORS (跨域请求) 被拦截 —— http://localhost:5174 请求 http://localhost:3000，但 Access-Control-Allow-Origin 头部没有配置，导致请求被浏览器拦截。
解决：前端可以尝试进行跨域请求。
①修改后端
（假设是 Express）： 在 server.js（或 index.js）中添加：
// 记得ctrl+shift+y打开终端，在里头运行 npm install cors
const cors = require("cors");
app.use(cors());（假设包管理中的 "type": "module"）
// 记得ctrl+shift+y打开终端，在里头运行 npm install cors
import cors from 'cors';
app.use(cors());根据情况，是 express服务器 还是 "type": "module"，判断是用require还是import
②手动设置响应头：
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', 'http://localhost:5174');res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');if (req.method === 'OPTIONS') {return res.status(200).end();}next();});或者
app.use((req, res, next) => {res.header("Access-Control-Allow-Origin", "*"); // 或指定特定前端地址res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");next();
});
③如果后端无法修改，可以在 fetch 请求中加入 mode: "cors"：
const response = await fetch("http://localhost:3000/save", {method: "POST",mode: "cors", // 添加 CORS 模式headers: {"Content-Type": "application/json"},body: JSON.stringify({ content: text })
});
完整代码：
import cors from 'cors';
import express from 'express';const app = express();
const PORT = 3000; // 后端服务器端口// 允许跨域请求
app.use(cors({origin: 'http://localhost:5174', // 允许的前端域名methods: ['GET', 'POST'], // 允许的请求方法allowedHeaders: ['Content-Type', 'Authorization'], // 允许的请求头
})); // 额外的跨域处理
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', 'http://localhost:5174');res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');if (req.method === 'OPTIONS') {return res.status(200).end();}next();});app.use(express.json()); // 解析JSON请求体// 添加 get请求，检查后端是否正常运行
app.get('/', (req, res) => {res.send('√后端运行正常！');
});注： 注意顺序，press和cors的顺序
相关文章：
前端 | CORS 跨域问题解决
问题：Access to fetch at http://localhost:3000/save from origin http://localhost:5174 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the request…...
《白帽子讲 Web 安全》之文件操作安全
目录 引言 （一）文件上传与下载漏洞概述 1.文件上传的常见安全隐患 1.1前端校验的脆弱性与服务端脚本执行危机在文件上传流程中，部分开发者可能会在前端使用 JavaScript 代码对文件后缀名进行简单校验，试图以此阻止非法文件上传…...
【AI】AI开源IDE：CLine源码分析报告
1. 源码位置： CLine 是一个开源的 VSCode 插件，其完整源码托管在 GitHub 的 cline/cline 仓库中。这个仓库包含 CLine 的核心逻辑（TypeScript 编写），包括与 LLM 的对话控制、工具调用接口，以及 VSCode 插件…...
使用数据库和缓存的时候，是如何解决数据不一致的问题的？
1.缓存更新策略 1.1. 缓存旁路模式（Cache Aside） 在应用里负责管理缓存，读取时先查缓存，如果命中了则返回缓存，如果未命中就查询数据库，然后返回缓存，返回缓存的同时把数据给写入缓存中。更新…...
docker compose 以redis为例
常见docker compose 命令 》》注意这个是旧版本的，新版本 docker 与compose 之间没有 - 新版本的 docker compose 把 version 取消了 ，redis 默认是没有配置文件的 ，nginx，mysql 默认是有的 services:redis:image: redis:lat…...
基于Kubernetes部署MySQL主从集群
以下是一个基于Kubernetes部署MySQL主从集群的详细YAML示例，包含StatefulSet、Service、ConfigMap和Secret等关键配置。MySQL主从集群需要至少1个主节点和多个从节点，这里使用 StatefulSet 初始化脚本 实现主从自动配置。 1. 创建 Namespace (可选) ap…...
VMware中安装配置Ubuntu（2024最新版 超详细）
目录 一、安装虚拟机软件 二、VMware虚拟机 三、 Ubuntu 下载 （1）官网下载 （2）清华镜像网站下载 四、创建虚拟机 五、Ubuntu 系统安装过程的配置 六、更换国内镜像源 七、环境搭建完毕 全篇较长，请慢慢观看 一…...
【Linux】信号处理以及补充知识
目录 一、信号被处理的时机： 1、理解： 2、内核态与用户态： 1、概念： 2、重谈地址空间： 3、处理时机： 补充知识： 1、sigaction： 2、函数重入： 3、volatile&…...
如何在rust中解析 windows 的 lnk文件（快捷方式）
一、从标题二开始看😁 这些天在使用rust写一个pc端应用程序，需要解析lnk文件获取lnk的图标以及原程序地址，之前并没有过pc端应用程序开发的经验， 所以在广大的互联网上游荡了两天。额🥺 今天找到了这个库 lnk_parse很…...
大模型系列课程学习-基于Vllm/Ollama/Ktransformers完成Deepseek推理服务部署
1.机器配置及实验说明 基于前期搭建的双卡机器装机教程，配置如下： 硬件名称参数备注CPUE5-2680V42 *2（线程28个）无GPU2080TI-22G 双卡魔改卡系统WSL Unbuntu 22.04.5 LTS虚拟机 本轮实验目的：基于VLLM/Ollama/ktran…...
Unity Shader学习总结
1.帧缓冲区和颜色缓冲区区别 用于存储每帧每个像素颜色信息的缓冲区 帧缓冲区包括：颜色缓冲区 深度缓冲区 模板缓冲区 自定义缓冲区 2.ImageEffectShader是什么 后处理用的shader模版 3.computerShader 独立于渲染管线之外，在显卡上运行，大量…...
Java多线程与高并发专题——什么是阻塞队列？
引入 阻塞队列（Blocking Queue）是一种线程安全的队列数据结构，它的主要特点是： 线程安全：多个线程可以安全地同时访问队列。阻塞操作：当队列为空时，从队列中获取元素的操作会被阻塞࿰…...
【Recon】CTF Web类题目主要类型
CTF Web类题目主要类型 1. 信息搜集类2. 注入类漏洞3. 文件处理漏洞4. 身份验证与会话漏洞5. 服务端漏洞6. 客户端漏洞7. 代码审计与PHP特性8. 业务逻辑漏洞总结 CTF（Capture The Flag）竞赛中的Web类题目主要考察参赛者对Web应用漏洞的识别与利用能力&am…...
comfyui（python）下载insightface失败
使用comfyui时，安装插件zenid、instantid、ip-adapter等换脸插件时，因为依赖insightface安装失败，导致插件中的节点无法正常使用，需要单独安装insightface。 下载insightface到本地，下载地址 选择与自己python版本一致…...
《DataWorks 深度洞察：量子机器学习重塑深度学习架构，决胜复杂数据战场》
在数字化浪潮汹涌澎湃的当下，大数据已然成为推动各行业发展的核心动力。身处这一时代洪流，企业对数据的处理与分析能力，直接关乎其竞争力的高低。阿里巴巴的DataWorks作为大数据领域的扛鼎之作，凭借强大的数据处理与分析能力&…...
Docker小游戏 | 使用Docker部署DOS游戏合集
Docker小游戏 | 使用Docker部署DOS游戏合集 前言项目介绍项目简介项目预览二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署dos-games网页小游戏下载镜像创建容器检查容器状态检查服务端口检查容器日志安全设置四、访问DOS游戏网页五、进阶玩法下载游戏拷贝…...
【redis】慢查询分析与优化
慢查询指在Redis中执行时间超过预设阈值的命令，其日志记录是排查性能瓶颈的核心工具。Redis采用单线程模型，任何耗时操作都可能阻塞后续请求，导致整体性能下降。 命令的执行流程 根据Redis的核心机制，命令执行流程可分为以下步骤…...
ThinkPHP框架
在电脑C磁盘中安装composer 命令 在电脑的D盘中创建cd文件夹 切换磁盘 创建tp框架 创建一个aa的网站，更换路径到上一步下载的tp框架路径 在管理中修改路径 下载压缩包public和view 将前面代码中的public和view文件替换 在PHPStom 中打开文件 运行指定路径 修改demo…...
从零构建高可用MySQL自动化配置系统：核心技术、工具开发与企业级最佳实践
在现代企业级数据库管理中，手动配置 MySQL 已无法满足高效、稳定和可扩展的需求。本文从 MySQL 配置管理的核心原理 出发，深入剖析 自动化配置工具的架构设计、关键技术实现，并结合 企业级落地方案，帮助读者构建一套 高可用、智能化的 MySQL 自动化配置系统。无论是 DevOps…...
qt 播放pcm音频
一、获取PCM音频 ffmpeg -i input.mp3 -acodec pcm_s16le -ar 44100 -ac 2 -f s16le output.pcm -acodec pcm_s16le：指定16位小端PCM编码格式（兼容性最佳）-ar 44100：设置采样率为CD标准44.1kHz（可替换为16000/8000等&a…...
开启mysql远程登录
目录 前言开启步骤 前言 为了安全考虑，mysql默认不允许远程登录，需要我们自己开启。当然在远程登录之前mysql的端口也要开放。下面是mysql开启远程登录的步骤。 开启步骤 本地登录mysql mysql -u root -p然后输入登录密码 给登录账号授权 GRANT AL…...
中级网络工程师面试题参考示例（5）
企业园区网络设计 问题： 请描述一下如何设计一个企业园区网络，包括核心层、汇聚层和接入层的功能及其关键技术。 解答： 核心层：负责高速数据交换，通常使用高性能的三层交换机，支持高带宽和低延迟。关键技…...
【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域
1、HarmonyOS TextInput或TextArea如何自动获取焦点？ 可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点，具体可以参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attribut…...
Git学习笔记（二）
Git学习笔记（二） 下载VSCode创建本地仓库推送远程仓库界面功能 使用 VSCode 进行Git仓库的项目管理 这篇文章是我学完使用 命令行终端 管理Git仓库额外学习的 文章主要用于巩固和方便后续复习 下载VSCode 可以看我这篇文章下载VSCode 创建本地仓库 …...
UDP协议和报文格式
✍作者：柒烨带你飞 💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。 📜系列专栏：网络安全从菜鸟到飞鸟的逆袭 目录 一，UDP协议1࿰…...
Java TCP 通信：实现简单的 Echo 服务器与客户端
TCP（Transmission Control Protocol）是一种面向连接的、可靠的传输层协议。与 UDP 不同，TCP 保证了数据的顺序、可靠性和完整性，适用于需要可靠传输的应用场景，如文件传输、网页浏览等。本文将基于 Java 实现一个简单的…...
升级到Android Studio 2024.2.2 版本遇到的坑
一、上来就编译报错，大概率是因为选择了替换安装，本地配置文件出错 找到本地当前版本的配置文件，删掉，重启studio就好了： 1、打开终端 2、“cd /Users/用户名/Library/Application\ Support/Google” //到Google目录 …...
hom_mat2d_to_affine_par 的c#实现
hom_mat2d_to_affine_par 的c#实现 背景：为课室贡献一个通用函数，实现halcon算子的同等效果，查询csdn未果，deepseek二哥与chtgpt大哥给不了最终程序，在大哥与二哥帮助下，最终实现同等效果。 踩坑…...
#9 【code】实现扩散模型的一个jupyter notebook
今天以一个简单的notebook入手，学习一下扩散模型的运行流程。有点困难不要紧，一个人吃了六个馒头才饱，他是吃第一个饱的，还是第六个饱的呢？始终坚信，现在的技术积累，终会成为未来高楼大厦的根基！ import torch import torchvision import matplotlib.pyplot as pltdef …...
三星首款三折叠手机被曝外屏6.49英寸：折叠屏领域的新突破
在智能手机的发展历程中，折叠屏手机的出现无疑是一次具有里程碑意义的创新。它打破了传统手机屏幕尺寸的限制，为用户带来了更加多元和便捷的使用体验。而三星，作为手机行业的巨头，一直以来都在折叠屏技术领域积极探索和创新。近日，三星首款三折叠手机的诸多细节被曝光，其…...
《OkHttp：工作原理 拦截器链深度解析》
目录 一、OKHttp 的基本使用 1. 添加依赖 2. 发起 HTTP 请求 3. 拦截器（Interceptor） 4. 高级配置 二、OKHttp 核心原理 1. 责任链模式（Interceptor Chain） 2. 连接池（ConnectionPool） 3. 请求调度…...
Python 中多种方式获取屏幕的 DPI值
在 Python 中，可以通过多种方式获取屏幕的 DPI（每英寸点数）。以下是几种常见的方法： 方法 1：使用 tkinter 模块 tkinter 是 Python 的标准 GUI 库，可以通过它获取屏幕的 DPI。 import tkinter as tkdef …...
linux安装Mariadb10.5并修改端口
首先配置yum源 进入下方的文件进行配置 vim /etc/yum.repos.d/MariaDB.repo填写下方内容 [mariadb]name MariaDBbaseurl https:///mirrors.aliyun.com/mariadb/yum/10.5/centos8-amd64/gpgkeyhttps:///mirrors.aliyun.com/mariadb/yum/RPM-GPG-KEY-MariaDBmodule_hotfixes…...
Java EE 进阶：Spring IoCDI
IOC的简单介绍 什么是Spring？Spring是一个开源的框架，让我们的开发更加的简单，我们可以用一句更加具体的话来概括Spring，就是Spring是一个包含众多工具方法的IOC容器。 简单介绍一下IOC，我们之前说过通过ReqestContr…...
蓝桥杯备考：图论初解
1：图的定义 我们学了线性表和树的结构，那什么是图呢？ 线性表是一个串一个是一对一的结构 树是一对多的，每个结点可以有多个孩子，但只能有一个父亲 而我们今天学的图！就是多对多的结构了 V表示的是图的顶点集…...
JVM类加载器面试题及原理
JVM只会运行二进制文件，类加载器的作用就是将字节码文件加载到JVM中，从而让Java程序能够启动起来。 1. 类加载器的种类 启动类加载器（BootStrap ClassLoader）：加载JAVA_HOME/jre/lib目录下的库扩展类加载器ÿ…...
《V8 引擎狂飙，Node.js 续写 JavaScript 传奇》
”你没想过也许是这个镇子对你来说太小了吗？ 对我而言，这个小镇容不下我的雄心壮志。 “ 什么是 Node.js？ Node.js是一个跨平台JS运行环境，使开发者可以搭建服务器端的JS应用程序 作用：使用 Node.js 编写服务器端程序…...
关于Springboot 应配置外移和Maven个性化打包一些做法
期望达到的效果是每次更新服务器端应用只需要更新主程序jar 依赖jar单独分离。配置文件独立存放于文件夹内，更新程序并不会覆盖已有的配置信息。 一、配置外移 1、开发环境外移 做法：在项目同级或者上级创建config文件夹放置配置文件，具体m…...
Lab18_ SQL injection with filter bypass via XML encoding
文章目录 前言：进入实验室构造 payload 前言： 实验室标题为： 通关 XML 编码绕过过滤器的 SQL 注入 简介： 此实验室的库存检查功能中存在 SQL 注入漏洞。查询结果在应用程序的响应中返回，因此您可以使用 UNION 攻击…...
网络空间安全（21）验证码安全
一、基本概念 验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。它通过…...
DMA在STM32中的应用
在STM32微控制器中，DMA（直接内存访问）是实现高效数据搬运的核心技术，能够显著减轻CPU负担并提升系统性能。以下是STM32中DMA的典型应用及配置方法： 1. STM32的DMA控制器架构 DMA控制器数量：不同系列配置不同，如STM32F1系列有1个DMA控制器（DMA1，7通道），F4系列有2个（…...
V8引擎中的垃圾回收机制如何工作?
V8引擎中的垃圾回收机制主要通过分代回收和增量标记清除算法来管理内存。以下是其工作原理的详细说明： V8 的垃圾回收机制基于以下核心设计原则： 1. 分代假设：大多数对象的生命周期很短，只有少数对象会存活较长时间；…...
汇编的伪指令
一、介绍 伪指令是用于对汇编过程进行控制的指令，该类指令并不是可执行指令，没有对应机器码，只用于汇编过程中为汇编程序提供汇编信息，帮助编译器编译。当汇编结束时，伪指令的使命也就结束了。伪操作可以实现如下功能…...
【TI】如何更改 CCS20.1.0 的 WORKSPACE 默认路径
参考链接： 如何更改 CCS Theia 中工作区的默认位置？- Code Composer Studio 论坛 - Code Composer Studio™︎ - TI E2E 支持论坛 --- How to change the default location for the workspace in CCS Theia? - Code Composer Studio forum - Code Comp…...
GStreamer —— 2.13、Windows下Qt加载GStreamer库后运行 - “教程13:播放控制“（附：完整源码）
运行效果(音频) 简介 上一个教程演示了GStreamer工具。本教程介绍视频播放控制。快进、反向播放和慢动作都是技术 统称为 Trick Modes，它们都有一个共同点 修改 Normal playback rate。本教程介绍如何实现 这些效果并在交易中添加了帧步进。特别是，它 显…...
推荐一款好用在线免费软件工具箱-传道软件箱
推荐一款好用在线免费软件工具箱-传道软件箱 传道软件箱 传道软件箱是一款在线免费软件工具箱，无需登录，无需费用，用完就走的软件工具，包有BMI计算、倒计时、单位转换、密码生成器、摩斯电码、代码编辑器、计算器、快递查询、二维…...
机器学习数学基础：40.结构方程模型（SEM）中卡方值与卡方自由度比
结构方程模型（SEM）中卡方值与卡方自由度比教程 在结构方程模型分析里，卡方值和卡方自由度比是评估模型拟合程度的重要指标，下面为大家详细介绍。 一、卡方值（CMIN） （一）基本概念与…...
【JavaEE进阶】Spring AOP详解
目录 🍃什么是AOP 🌳什么是Spring AOP 🌴上手Spring AOP 🚩引入依赖 🚩编写AOP程序 🎍Spring AOP核心概念 🚩切点(Pointcut) 🚩连接点(Join Point) 🚩通知(Advi…...
Docker 的基本概念和优势，以及在应用程序开发中的实际应用
Docker 是一种开源的容器化平台，让开发人员能够打包、发布和运行应用程序在轻量级、可移植的容器中。Docker 容器包含应用程序的代码、运行时环境、系统工具、系统库等，使得应用程序能在任何环境中快速部署和运行。 Docker 的基本概念包括以下几点&…...
python flask
安装 pip install flask 查看版本 pip show flask 启动服务器 设置环境变量，在控制台执行命令，app.py是创建的文件名 windows set FLASK_APPapp.py mac/linux export FLASK_APPapp.py 启动内置web服务器，注意要进入到app.py所在的文…...