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",})
}

说明

  1. 安装 gin-contrib/cors：使用 go get github.com/gin-contrib/cors 安装中间件。
  2. 配置 CORS 中间件：在 HttpServer 函数中使用 cors.DefaultConfig() 配置 CORS 设置，并将其应用到 Gin 服务器。
  3. 允许的来源：config.AllowOrigins = []string{"*"} 允许所有来源的请求。在生产环境中，建议指定具体的域名以提高安全性。
  4. 允许的方法：config.AllowMethods 指定允许的 HTTP 方法。
  5. 允许的头部：config.AllowHeaders 指定允许的请求头部。
  6. 暴露的头部：config.ExposeHeaders 指定允许暴露的响应头部。
  7. 允许凭证：config.AllowCredentials 允许发送凭证（如 cookies）。
  8. 最大缓存时间：config.MaxAge 设置预检请求的最大缓存时间。

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

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

相关文章

hive之lag函数

hive之lag函数

从博客上发现两个面试题，其中有个用到了lag函数。整理学习 LAG 函数是 Hive 中常用的窗口函数，用于访问同一分区内 前一行（或前 N 行）的数据。它在分析时间序列数据、计算相邻记录差异等场景中非常有用。 一、语法 LAG(column,…
阅读更多...
【软考-架构】1.3、磁盘-输入输出技术-总线

【软考-架构】1.3、磁盘-输入输出技术-总线

GitHub地址：https://github.com/tyronczt/system_architect ✨资料&文章更新✨ 文章目录 存储系统💯考试真题输入输出技术💯考试真题第一题第二题 存储系统 寻道时间是指磁头移动到磁道所需的时间； 等待时间为等待读写的扇区…
阅读更多...
盛铂科技PDROUxxxx系列锁相介质振荡器(点频源）：高精度信号源

盛铂科技PDROUxxxx系列锁相介质振荡器(点频源）：高精度信号源

——超低相位噪声、宽频覆盖、灵活集成，赋能下一代射频系统 核心价值：以突破性技术解决行业痛点 在雷达、卫星通信、高速数据采集等高端射频系统中，信号源的相位噪声、频率稳定度及集成灵活性直接决定系统性能上限。盛铂科技PDROUxxxx系列锁…
阅读更多...
【安装】SQL Server 2005 安装及安装包

【安装】SQL Server 2005 安装及安装包

安装包 SQLEXPR.EXE：SQL Server 服务SQLServer2005_SSMSEE.msi：数据库管理工具，可以创建数据库，执行脚本等。SQLServer2005_SSMSEE_x64.msi：同上。这个是 64 位操作系统。 下载地址 https://www.microsoft.com/zh-c…
阅读更多...
【文献阅读】The Efficiency Spectrum of Large Language Models: An Algorithmic Survey

【文献阅读】The Efficiency Spectrum of Large Language Models: An Algorithmic Survey

这篇文章发表于2024年4月 摘要 大语言模型（LLMs）的快速发展推动了多个领域的变革，重塑了通用人工智能的格局。然而，这些模型不断增长的计算和内存需求带来了巨大挑战，阻碍了学术研究和实际应用。为解决这些问题&…
阅读更多...
如何在Github上面上传本地文件夹

如何在Github上面上传本地文件夹

前言 直接在GitHub网址上面上传文件夹是不行的，需要一层一层创建然后上传，而且文件的大小也有限制，使用Git进行上传更加方便和实用 1.下载和安装Git Git - Downloads 傻瓜式安装即可 2.获取密钥对 打开自己的Github，创建SSH密钥&…
阅读更多...
kafka-web管理工具cmak

kafka-web管理工具cmak

一. 背景： 日常运维工作中，采用cli的方式进行kafka集群的管理，还是比较繁琐的(指令复杂？)。为方便管理，可以选择一些开源的webui工具。 推荐使用cmak。 二. 关于cmak： cmak是 Yahoo 贡献的一款强大的 Apac…
阅读更多...
python之爬虫入门实例

python之爬虫入门实例

链家二手房数据抓取与Excel存储 目录 开发环境准备爬虫流程分析核心代码实现关键命令详解进阶优化方案注意事项与扩展 一、开发环境准备 1.1 必要组件安装 # 安装核心库 pip install requests beautifulsoup4 openpyxl pandas# 各库作用说明： - requests&#x…
阅读更多...
Redis的CPU高达90%时如何处理

Redis的CPU高达90%时如何处理

Redis的CPU高达90%时如何处理 1. 分析和优化2. 扩展和分片3. 缓存策略调整4. 资源提升5. 负载均衡6. 进程调整7. 代码层面改进8. 其他 当Redis的CPU使用率高达90%时，说明Redis服务器可能处于过载状态，这可能会导致响应时间变长甚至服务中断。要处理这种…
阅读更多...
Faster R-CNN 算法详解

Faster R-CNN 算法详解

Faster R-CNN 是在 R-CNN 和 Fast R-CNN 的基础上进一步优化的一种目标检测算法。它通过引入 Region Proposal Network (RPN) 将区域建议和目标检测整合到一个统一的框架中，大幅提高了检测效率。以下是对 Faster R-CNN 算法的详细解析： 1. 概述 Faster R-CNN 主要由三部分组…
阅读更多...
数据结构：八大排序(冒泡，堆，插入，选择，希尔，快排，归并，计数)详解

数据结构：八大排序(冒泡，堆，插入，选择，希尔，快排，归并，计数)详解

目录 一.冒泡排序 二.堆排序 三.插入排序 四.选择排序 五.希尔排序 六.快速排序 1.Lomuto版本（前后指针法） 2.Lomuto版本的非递归算法 3.hoare版本（左右指针法） 4.挖坑法找分界值： 七.归并排序 八.计数排序…
阅读更多...
【商城实战(2)】商城架构设计：从底层逻辑到技术实现

【商城实战(2)】商城架构设计：从底层逻辑到技术实现

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配&#xf…
阅读更多...
Mac mini M4安装nvm 和node

Mac mini M4安装nvm 和node

先要安装Homebrew（如果尚未安装）。在终端中输入以下命令： /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 根据提示操作完成Homebrew的安装。 安装nvm。在终端中输入以下命令&#xf…
阅读更多...
FOC无感开环启动算法

FOC无感开环启动算法

FOC无感开环启动排除掉高频注入这种直接识别当前转子dq轴的位置直接闭环启动，大部分的常规启动方式就是三段式启动，对齐-强拖-观测器介入-观测器误差稳定后平滑过渡-闭环。 这里就只写出I/F（V/F）启动的角度输出的代码&#xff0c…
阅读更多...
Android 自定义View 加 lifecycle 简单使用

Android 自定义View 加 lifecycle 简单使用

前言 本文是自定义view中最简单的使用方法，分别进行 ‘onMeasure’、‘onDraw’、‘自定义样式’、‘lifecycle’的简单使用，了解自定义view的使用。 通过lifecycle来控制 动画的状态 一、onMeasure做了什么？ 在onMeasure中获取view 的宽和…
阅读更多...
《挑战你的控制力！开源小游戏“保持平衡”开发解析：用HTML+JS+CSS实现物理平衡挑战》​

《挑战你的控制力！开源小游戏“保持平衡”开发解析：用HTML+JS+CSS实现物理平衡挑战》​

📌 大家好，我是智界工具库，致力于分享好用实用且智能的软件以及在JAVA语言开发中遇到的问题，如果本篇文章对你有所帮助请帮我点个小赞小收藏吧，谢谢喲！😘😘😘 博主声…
阅读更多...
浅浅初识AI、AI大模型、AGI

浅浅初识AI、AI大模型、AGI

前记：这里只是简单了解，后面有时间会专门来扩展和深入。 当前，人工智能（AI）及其细分领域（如AI算法工程师、自然语言处理NLP、通用人工智能AGI）的就业前景呈现高速增长态势，市场需求…
阅读更多...
服务器时间同步

服务器时间同步

方法一 [rootbogon hwh-ansible]# cat time-sync.sh #!/bin/bash # NTP 服务器信息 NTP_SERVER"192.168.42.12" PASSWORD"123456" # 多个 IP 地址 HOSTS("192.168.42.8" "192.168.42.9" "192.168.42.10" "192.168.42…
阅读更多...
Android Studio安装与配置详解

Android Studio安装与配置详解

Android Studio安装与配置详解 前言 作为一名Android开发者，Android Studio是我们日常开发中最重要的工具。本文将详细介绍Android Studio的安装配置过程，帮助你搭建一个高效的开发环境。 一、Android Studio下载与安装 1.1 下载Android Studio 访问…
阅读更多...
在PyCharm开发环境中，如何建立hello.py文件？

在PyCharm开发环境中，如何建立hello.py文件？

李升伟 整理 一、分析 首先，用户可能是刚接触PyCharm或者Python的新手，所以需要从打开软件开始讲起。不过用户可能已经安装好了PyCharm，但也许需要确认是否已经正确安装。不过问题重点在创建文件，可能不需要深入安装步骤。 接下…
阅读更多...
最新文章

Copyright @ 2022~2023