政府网站j建设调研报告/郑州网站建设推广优化

政府网站j建设调研报告,郑州网站建设推广优化,如何腾讯云二级域名做网站,丰宁县建设局网站问题: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…

问题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:3000Access-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的顺序

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

导轨式ARM工业控制器:组态软件平台的“神经中枢”

工业自动化领域,组态软件平台扮演着至关重要的角色。它不仅是工业控制系统的“大脑”,更是实现智能化、高效化生产的关键工具。而作为组态软件平台的硬件支撑,导轨式ARM工控机(以下简称“工控机”)凭借其紧凑的设计、强…

25年携程校招社招求职能力北森测评材料计算部分:备考要点与误区解析

在求职过程中,能力测评是筛选候选人的重要环节之一。对于携程这样的知名企业,其能力测评中的材料计算部分尤为关键。许多求职者在备考时容易陷入误区,导致在考试中表现不佳。本文将深入解析材料计算部分的实际考察方向,并提供针对…

RuoYi框架添加自己的模块(学生管理系统CRUD)

RuoYi框架添加自己的模块(学生管理系统) 框架顺利运行 首先肯定要顺利运行框架了,这个我不多说了 设计数据库表 在ry数据库中添加表tb_student 表字段如图所示 如图所示 注意id字段是自增的 注释部分是后面成功后前端要展示的部分 导入…

2025最新群智能优化算法:山羊优化算法(Goat Optimization Algorithm, GOA)求解23个经典函数测试集,MATLAB

一、山羊优化算法 山羊优化算法(Goat Optimization Algorithm, GOA)是2025年提出的一种新型生物启发式元启发式算法,灵感来源于山羊在恶劣和资源有限环境中的适应性行为。该算法旨在通过模拟山羊的觅食策略、移动模式和躲避寄生虫的能力&…

博弈论算法

一、减法游戏 初始有一个数 n。 两个玩家轮流操作,每次可以减去 1 到 9 之间的任意整数。 将数减到 0 的玩家获胜。 可以发现规律: 减法游戏只需要判断当前数取模是否为0,即可快速判断胜负。 例题: Leetcode 292. Nim 游戏 …

Excel·VBA江西省预算一体化工资表一键处理

每月制作工资表导出为Excel后都需要调整格式,删除0数据的列、对工资表项目进行排序、打印设置等等,有些单位还分有“行政”、“事业”2个工资表就需要操作2次。显然,这种重复操作的问题,可以使用VBA代码解决 目录 代码使用说明1&a…

嵌入式学习笔记-卡尔曼滤波,PID,MicroPython

文章目录 卡尔曼滤波卡尔曼滤波的核心思想卡尔曼滤波的数学模型1. 状态转移模型(预测系统状态)2. 观测模型(预测测量值) 卡尔曼滤波的五个关键步骤1. 预测状态2. 预测误差协方差3. 计算卡尔曼增益4. 更新状态5. 更新误差协方差 卡…

一周热点-文本生成中的扩散模型- Mercury Coder

一、背景知识 在人工智能领域,文本生成模型一直是研究的热点。传统的大型语言模型多采用自回归架构,从左到右逐个预测下一个标记。这种模型虽然在生成连贯文本方面表现出色,但在速度上存在一定的局限性,因为它需要按顺序生成每个标…

Qt调试功能使用方法

QT编程环境 QT在Windows操作系统下的三种编程环境搭建。 方案编程环境编译器调试器1Qt CreatorMinGW GCCGDB2Qt CreatorMicrosoft Visual C CompilerDebugging Tools for Widows3Microsoft Visual Studio VS自带VS自带 方案提及的QT安装程序及压缩包均能在官网Index of /off…

vulnhub靶场之【digitalworld.local系列】的mercy靶机

前言 靶机:digitalworld.local-mercy,IP地址为192.168.10.11 攻击:kali,IP地址为192.168.10.6 kali采用VMware虚拟机,靶机选择使用VMware打开文件,都选择桥接网络 这里官方给的有两种方式,一…

Fiddler抓取App接口-Andriod/IOS配置方法

Andriod配置方法: 1)确保手机和Fiddler所在主机在同一个局域网中 2)获取Fiddler所在主机的ip地址,通过cmd命令进入命令编辑器,输入ipconfig -all,找到IPv4地址,记下该地址 3)对手机…

步进电机软件细分算法解析与实践指南

1. 步进电机细分技术概述 步进电机是一种将电脉冲信号转换为角位移的执行机构,其基本运动单位为步距角。传统步进电机的步距角通常为 1.8(对应 200 步 / 转),但在高精度定位场景下,这种分辨率已无法满足需求。细分技术…

C语言_数据结构总结2:动态分配方式的顺序表

0——静态分配内存的顺序表和动态分配内存的顺序表的相同之处和不同之处 相同之处 基本操作逻辑相同:无论是静态分配还是动态分配的顺序表,其核心的操作逻辑是一致的。例如插入操作都需要将插入位置之后的元素依次后移,删除操作都需要将删除…

Vue 与 Element UI 深度探秘:从 Array.isArray 到动态绑定的技术之旅!✨

以下是一篇深入的技术博客&#xff0c;基于我们对 compare-form.vue 和 <w-form-select.vue> 的所有讨论&#xff0c;涵盖 Array.isArray、option-label/option-value、:list 动态绑定、: 语法以及 Vue 2/3 兼容性等问题。博客风格轻松有趣&#xff0c;加入 SVG 图解和实…

计算机视觉|3D卷积网络VoxelNet:点云检测的革新力量

一、引言 在科技快速发展的背景下&#xff0c;3D 目标检测技术在自动驾驶和机器人领域中具有重要作用。 在自动驾驶领域&#xff0c;车辆需实时、准确感知周围环境中的目标物体&#xff0c;如行人、车辆、交通标志和障碍物等。只有精确检测这些目标的位置、姿态和类别&#x…

信奥赛CSP-J复赛集训(模拟算法专题)(3):P1089 [NOIP 2004 提高组] 津津的储蓄计划

信奥赛CSP-J复赛集训&#xff08;模拟算法专题&#xff09;&#xff08;3&#xff09;&#xff1a;P1089 [NOIP 2004 提高组] 津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理。每个月的月初妈妈给津津 300 300 300 元钱&#xff0c;津津会预算这个月的花销&#xff0…

数据结构--【顺序表与链表】笔记

顺序表 template <class T> class arrList :public List<T> //表示 arrList 类以公有继承的方式继承自 List<T> 类 //公有继承意味着 List<T> 类的公共成员在 arrList 类中仍然是公共成员&#xff0c;受保护成员在 arrList 类中仍然是受保护成员。 { …

2025最新群智能优化算法:基于RRT的优化器(RRT-based Optimizer,RRTO)求解23个经典函数测试集,MATLAB

一、基于RRT的优化器 基于RRT的优化器&#xff08;RRT-based Optimizer&#xff0c;RRTO&#xff09;是2025年提出的一种新型元启发式算法。其受常用于机器人路径规划的快速探索随机树&#xff08;RRT&#xff09;算法的搜索机制启发&#xff0c;首次将RRT算法的概念与元启发式…

im即时聊天客服系统SaaS还是私有化部署:成本、安全与定制化的权衡策略

随着即时通讯技术的不断发展&#xff0c;IM即时聊天客服系统已经成为企业与客户沟通、解决问题、提升用户体验的重要工具。在选择IM即时聊天客服系统时&#xff0c;企业面临一个重要决策&#xff1a;选择SaaS&#xff08;软件即服务&#xff09;解决方案&#xff0c;还是进行私…

mysql中in和exists的区别?

大家好&#xff0c;我是锋哥。今天分享关于【mysql中in和exists的区别?】面试题。希望对大家有帮助&#xff1b; mysql中in和exists的区别? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 MySQL 中&#xff0c;IN 和 EXISTS 都用于进行子查询&#xff0c;但它…