vue3和beego跨域请求配置方式

 更新时间:2025年01月13日 10:08:39   作者:qq_33805862  
文章介绍了如何在Vue3和Beego中配置跨域请求,在Beego的router.go文件的init函数中添加option函数来回应预检请求,以支持跨域请求,这是个人经验分享,希望能帮助到大家

vue3和beego跨域请求配置

在router.go的init 函数内添加

如下内容:

func init() {
	//跨域设置
	var FilterGateWay = func(ctx *context.Context) {
		ctx.ResponseWriter.Header().Set("Access-Control-Allow-Origin", "*")
		//允许访问源
		ctx.ResponseWriter.Header().Set("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS")
		//允许post访问
		ctx.ResponseWriter.Header().Set("Access-Control-Allow-Headers", "Access-Control-Allow-Origin,ContentType,Authorization,accept,accept-encoding, authorization, content-type") //header的类型
		ctx.ResponseWriter.Header().Set("Access-Control-Max-Age", "1728000")
		ctx.ResponseWriter.Header().Set("Access-Control-Allow-Credentials", "true")
	}
	beego.InsertFilter("*", beego.BeforeRouter, FilterGateWay)
	//路由设置
	ns := beego.NewNamespace("/v1",
		// NBSP用于跨域请求
		beego.NSRouter("*", &controllers.BaseController{}, "OPTIONS:Options"))
	beego.AddNamespace(ns)
//=======================    下面再写自己的代码    =======================
beego.Router("/", &controllers.MainController{})
// .....
}

定义option函数回应预检请求(controller中)

// @Title test
// @Description 预检
// @Success 200 {string} "hello world"
// @router / [options]
func (c *BaseController) Options() {
    c.Data["json"] = map[string]interface{}{"status": 200, "message": "ok", "moreinfo": ""}
    c.ServeJSON()
}
//===============	下面再写自己的代码		=======================
// .....

跨域请求是会先发送一个option请求,该请求如果收到响应(响应内容随便),客户端则才会继续发送请求

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Element UI动态组件样式修改的解决方法

    Element UI动态组件样式修改的解决方法

    最近在项目里用Element UI的动态组件时,遇到了样式修改的难题——明明写了CSS,但死活不生效!相信不少小伙伴也踩过这个坑,今天小杨就来分享几个实用技巧,帮你轻松搞定这类问题,需要的朋友可以参考下
    2025-07-07
  • 浅谈vue3中effect与computed的亲密关系

    浅谈vue3中effect与computed的亲密关系

    这篇文章主要介绍了浅谈vue3中effect与computed的亲密关系,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue实现几秒后跳转新页面代码

    vue实现几秒后跳转新页面代码

    这篇文章主要介绍了vue实现几秒后跳转新页面代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue开发Html5微信公众号的步骤

    Vue开发Html5微信公众号的步骤

    这篇文章主要介绍了Vue开发Html5微信公众号的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 一篇文章带你吃透Vuex3的状态管理

    一篇文章带你吃透Vuex3的状态管理

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下
    2022-07-07
  • vue3 update:modelValue用法小结

    vue3 update:modelValue用法小结

    本文主要介绍了vue3 update:modelValue用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-12-12
  • 基础的前端vite项目创建过程详解

    基础的前端vite项目创建过程详解

    这篇文章主要介绍了如何使用Vite创建一个前端项目,并配置了Vue Router、Vuex、Element Plus、Axios和Element Plus图标等第三方依赖,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Vue实现底部侧边工具栏的实例代码

    Vue实现底部侧边工具栏的实例代码

    这篇文章主要介绍了Vue实现底部侧边工具栏的实例代码,文中通过分享一段代码介绍vue 侧边导航栏递归显示功能,需要的朋友可以参考下
    2018-09-09
  • vue如何自定义组件v-model

    vue如何自定义组件v-model

    这篇文章主要介绍了vue如何自定义组件v-model问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 关于vue.js过渡css类名的理解(推荐)

    关于vue.js过渡css类名的理解(推荐)

    这篇文章主要介绍了关于vue.js过渡css类名的理解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-04-04

最新评论