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请求,该请求如果收到响应(响应内容随便),客户端则才会继续发送请求

总结

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

相关文章

  • Electron 如何调用本地模块的方法

    Electron 如何调用本地模块的方法

    这篇文章主要介绍了Electron 如何调用本地模块的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue各种字符串拼接方式

    vue各种字符串拼接方式

    这篇文章主要介绍了vue各种字符串拼接方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    关于element-ui日期时间选择器选不中12小时以后的时间详解

    在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下
    2022-08-08
  • 适合前端Vue开发童鞋的跨平台Weex的使用详解

    适合前端Vue开发童鞋的跨平台Weex的使用详解

    这篇文章主要介绍了适合前端Vue开发童鞋的跨平台Weex的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • require.js+vue开发微信上传图片组件

    require.js+vue开发微信上传图片组件

    这篇文章主要为大家详细介绍了require.js+vue+vue-router+vue-resource开发微信上传图片组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue+webpack dev本地调试全局样式引用失效的解决方案

    vue+webpack dev本地调试全局样式引用失效的解决方案

    今天小编就为大家分享一篇vue+webpack dev本地调试全局样式引用失效的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    这篇文章主要介绍了解决vue下载后台传过来的乱码流的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • 详解Vue整合axios的实例代码

    详解Vue整合axios的实例代码

    本篇文章主要介绍了详解Vue整合axios的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue3.0+element表格获取每行数据代码示例

    vue3.0+element表格获取每行数据代码示例

    这篇文章主要给大家介绍了关于vue3.0+element表格获取每行数据的相关资料,在element-ui中,你可以通过为表格的行绑定单击事件来获取表格中的一行数据,需要的朋友可以参考下
    2023-09-09

最新评论