go语言因为前端跨域导致无法访问到后端解决方案
前端服务8080访问后端8081这端口显示跨域了
ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41) at async getCurrentUser (webpack-internal:///./src/api/user.ts:50:10) at async Proxy.fetchLoginUser (webpack-internal:///./src/store/useLoginUserStore.ts:17:17)
跨域问题通常是由于浏览器的同源策略导致的。需要在 Gin 服务器中启用 CORS(跨域资源共享)。Gin 提供了一个中间件 gin-contrib/cors 来方便地处理 CORS 请求。
启用 CORS 的步骤:
安装gin-contrib/cors中间件:
可以使用 go get 命令来安装这个中间件。
go get github.com/gin-contrib/cors
package appimport ("fmt""github.com/gin-contrib/cors""github.com/gin-gonic/gin""log""net/http""time"
)func HttpServer() {ginServer := gin.Default()// 配置 CORS 中间件config := cors.DefaultConfig()config.AllowOrigins = []string{"http://localhost:8080"} // 允许8080来源的请求,生产环境中建议指定具体的域名config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"} // 允许的请求方法config.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type", "Authorization"} // 允许的请求头config.ExposeHeaders = []string{"Content-Length"} // 允许的响应头config.AllowCredentials = true // 允许携带凭证config.MaxAge = 12 * time.Hour // 预检请求缓存时间ginServer.Use(cors.New(config)) // 使用 CORS 中间件// 注册路由和处理函数ginServer.POST("/api/backup", backupHandler)ginServer.POST("/api/user/register", userRegisterHandler)ginServer.POST("/api/user/login", userLoginHandler)ginServer.POST("/api/user/logout", userLogoutHandler)ginServer.GET("/api/user/current", getCurrentUserHandler)ginServer.GET("/api/user/search", searchUserHandler)ginServer.POST("/api/user/delete", deleteUserHandler)if err := ginServer.Run(":8081"); err != nil {log.Fatalf("HTTP server failed to start: %v", err)}
}// 备份处理函数
func backupHandler(context *gin.Context) {var login struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&login); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg": "invalid request",})return}if login.Username == "admin" && login.Password == "123456" {context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "success",})fmt.Println("成功执行这个代码")} else {context.JSON(http.StatusUnauthorized, gin.H{"code": http.StatusUnauthorized,"msg": "invalid credentials",})}
}// 用户注册处理函数
func userRegisterHandler(context *gin.Context) {var user struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&user); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg": "invalid request",})return}// 检查用户名是否已存在// 这里可以添加数据库操作或其他逻辑if user.Username == "admin" {context.JSON(http.StatusConflict, gin.H{"code": http.StatusConflict,"msg": "username already exists",})return}// 添加新用户// 这里可以添加数据库操作或其他逻辑fmt.Println("User registered:", user.Username)context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "user registered successfully",})
}// 用户登录处理函数
func userLoginHandler(context *gin.Context) {var user struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&user); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg": "invalid request",})return}// 验证用户名和密码// 这里可以添加数据库操作或其他逻辑if user.Username == "admin" && user.Password == "123456" {context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "login successful",})return}context.JSON(http.StatusUnauthorized, gin.H{"code": http.StatusUnauthorized,"msg": "invalid credentials",})
}// 用户登出处理函数
func userLogoutHandler(context *gin.Context) {// 这里可以添加登出逻辑,例如清除会话等context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "logout successful",})
}// 获取当前用户信息处理函数
func getCurrentUserHandler(context *gin.Context) {// 这里可以添加获取当前用户逻辑,例如从会话中获取用户信息user := struct {Username string `json:"username"`}{Username: "admin"} // 示例用户context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "success","user": user,})
}// 获取用户列表处理函数
func searchUserHandler(context *gin.Context) {username := context.Query("username")user := struct {Username string `json:"username"`}{Username: username} // 示例用户context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "success","user": user,})
}// 删除用户处理函数
func deleteUserHandler(context *gin.Context) {var id stringif err := context.ShouldBindJSON(&id); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg": "invalid request",})return}// 删除用户逻辑// 这里可以添加数据库操作或其他逻辑fmt.Println("User deleted:", id)context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg": "user deleted successfully",})
}
说明
- 安装
gin-contrib/cors:使用go get github.com/gin-contrib/cors安装中间件。 - 配置 CORS 中间件:在
HttpServer函数中使用cors.DefaultConfig()配置 CORS 设置,并将其应用到 Gin 服务器。 - 允许的来源:
config.AllowOrigins = []string{"*"}允许所有来源的请求。在生产环境中,建议指定具体的域名以提高安全性。 - 允许的方法:
config.AllowMethods指定允许的 HTTP 方法。 - 允许的头部:
config.AllowHeaders指定允许的请求头部。 - 暴露的头部:
config.ExposeHeaders指定允许暴露的响应头部。 - 允许凭证:
config.AllowCredentials允许发送凭证(如 cookies)。 - 最大缓存时间:
config.MaxAge设置预检请求的最大缓存时间。
相关文章:
go语言因为前端跨域导致无法访问到后端解决方案
前端服务8080访问后端8081这端口显示跨域了 ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/A…...
Jmeter使用介绍
文章目录 前言Jmeter简介安装与配置JDK安装与配置JMeter安装与配置 打开JMeter方式一方式二 设置Jmeter语言为中文方法一(仅一次性)方法二(永久设置成中文) Jmeter文件常用目录 元件与组件元件组件元件的作用域元件的执行顺序第一个案例添加线程组添加 H…...
【商城实战(13)】购物车价格与数量的奥秘
【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配…...
Spring使用@Scheduled注解的参数详解
在现代Java开发中,定时任务是一个常见的需求。Spring框架提供了Scheduled注解,让我们能够以简单、直观的方式定义和管理这些定时任务。接下来,我们来深入探讨这个注解的使用,以及它的参数都有哪些含义和作用。 Scheduled注解可以…...
【网络】HTTP协议、HTTPS协议
HTTP与HTTPS HTTP协议概述 HTTP(超文本传输协议):工作在OSI顶层应用层,用于客户端(浏览器)与服务器之间的通信,B/S模式 无状态:每次请求独立,服务器不保存客户端状态(通过Cookie/Session扩展状态管理)。基于TCP:默认端口80(HTTP)、443(HTTPS),保证可靠传输。请…...
【Windows下Gitbook快速入门使用】
Windows下Gitbook快速入门使用 1 工具安装1.1 Node.js下载安装1.1 环境变量1.2 npm配置1.3 安装gitbook 2 gitbook使用2.1 gitbook 无法执行2.2 gitbook常用命令 Gitbook是一个软件,使用Git和Markdown来编排书本; GitBook helps you pushlish beautiful …...
创建Electron35 + vue3 + electron-builder项目,有很过坑,记录过程
环境: node v20.18.0 npm 11.1.0 用到的所有依赖: "dependencies": {"core-js": "^3.8.3","vue": "^3.2.13","vue-router": "^4.5.0"},"devDependencies": {"ba…...
FPGA 实验报告:四位全加器与三八译码器仿真实现
目录 安装Quartus软件 四位全加器 全加器、半加器 半加器: 全加器: 四位全加器电路图 创建项目 半加器 全加器 四位全加器 代码实现 半加器 全加器 四位全加器 三八译码器 创建项目 代码展示 modelsim仿真波形图 四位全加器 三八译码…...
动态规划详解(二):从暴力递归到动态规划的完整优化之路
目录 一、什么是动态规划?—— 从人类直觉到算法思维 二、暴力递归:最直观的问题分解方式 1. 示例:斐波那契数列 2. 递归树分析(以n5为例) 3. 问题暴露 三、第一次优化:记忆化搜索(Memoiza…...
前端学习——HTML
HTML VSCode常用快捷键HTML标签文本标签列表标签表格Form表单表单元素 块元素与行内元素新增标签 VSCode常用快捷键 代码格式化:ShiftAltF 向上或向下移动一行:AltUp或AltDown 快速复制一行代码:ShiftAltUp或者ShiftAltDown 快速替换&#x…...
12.【线性代数】——图和网络
十二 图和网络(线性代数的应用) 图 g r a p h { n o d e s , e d g e s } graph\{nodes, edges\} graph{nodes,edges}1.关联矩阵2. A A A矩阵的零空间,求解 A x 0 Ax0 Ax0 电势3. A T A^T AT矩阵的零空间,电流总结电流图结论 …...
[环境搭建篇] Windows 环境下如何安装repo工具
Windows 环境下如何安装repo工具 1. 安装前置依赖2. 配置Repo引导脚本方法一:通过Gitee镜像安装(推荐)方法二:通过清华镜像安装 3. 解决依赖问题4. 初始化Repo仓库5. 常见问题解决 前言: 在Windows环境下安装Repo工具需…...
LeetCode 热题 100_字符串解码(71_394_中等_C++)(栈)
LeetCode 热题 100_字符串解码(71_394) 题目描述:输入输出样例:题解:解题思路:思路一(栈): 代码实现代码实现(栈):以思路一为例进行调…...
「DataX」数据迁移-IDEA运行DataX方法总结
背景 业务需求希望把Oracle数据库中的数据,迁移至MySql数据库中,因为需要迁移全量和增量的数据,所以希望想用数据迁移工具进行操作。 经过一些调研查询,最终打算使用DataX进行数据的迁移。 DataX简单介绍 DataX 是阿里云 DataW…...
【 <一> 炼丹初探:JavaWeb 的起源与基础】之 Servlet 过滤器:实现请求的预处理与后处理
<前文回顾> 点击此处查看 合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、过滤器&…...
DeepSeek与浏览器自动化AI Agent构建指南
文章使用到的模型可以用硅基流动中的: 注册链接:硅基流动统一登录 邀请码:FytHp9Xa 一、技术选型阶段 1. 基础组件选择 AI模型:DeepSeek-R1开放API(对话/推理)或DeepSeek-Coder(代码生成&#…...
面试中常问的mysql数据库指令【杭州多测师_王sir】
数据库中的修改表结构、增删改查、用户权限操作DDL 》数据库定义语言 create database,create table drop tableDML 》数据库操作语言 insert into,delete from,update set,DQL 》数据库查询语言 select .... from....crea…...
深度学习驱动的智能化革命:从技术突破到行业实践
第一章 深度学习的技术演进与核心架构 1.1 从浅层网络到深度学习的范式转变 深度学习的核心在于通过多层次非线性变换自动提取数据特征,其发展历程可划分为三个阶段:符号主义时代的规则驱动(1950s-1980s)、连接主义时代的浅层网络(1990s-2000s)以及深度学习时代的端到端…...
基于编译器特性浅析C++程序性能优化
最近在恶补计算机基础知识,学到CSAPP第五章的内容,在这里总结并且展开一下C程序性能优化相关的内容。 衡量程序性能的方式 一般而言,程序的性能可以用CPE(Cycles Per Element)来衡量,其指的是处理每个元素…...
服务器上通过ollama部署deepseek
2025年1月下旬,DeepSeek的R1模型发布后的一周内就火了,性能比肩OpenAI的o1模型,且训练成本仅为560万美元,成本远低于openAI,使得英伟达股票大跌。 下面我们来看下如何个人如何部署deepseek-r1模型。 我是用的仙宫云的…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具,专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑(如DBC、LDF、ARXML、HEX等),并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
