beego项目解决跨域 (beego做后台，vue做前端)

一  ，beego 输出json 数据

1.首先关闭beego自动渲染模板开关。

如果您的应用是不需要模板输出的，那么可以在配置文件或者在 main.go 中设置关闭自动渲染。

配置文件配置如下：

autorender = false

main.go 文件中设置如下：

beego.AutoRender = false

用户无需手动的调用渲染输出模板，beego 会自动的在调用完相应的 method 方法之后调用 Render 函数，当然如果您的应用是不需要模板输出的，那么可以在配置文件或者在 main.go 中设置关闭自动渲染。

配置文件配置如下：

autorender = false

2.使用beego框架的输出json 数据，方法如下。

其实两个方法都一样只是一个是从数据表中获取数据转json，一个是自己定义的转json

方法一：

func (n *WelcomeController) Add() {

		nyy := orm.NewOrm()
		//定义一个结构体
		type Res struct {
			Id      int
			Name    string
			Comm    string
			Content string
		}
		var comm1 []Res
		_, err := nyy.Raw("select * from yf_class").QueryRows(&comm1)
		fmt.Println(err)
		fmt.Println(comm1)
		n.Data["json"] = comm1
		n.ServeJSON()

}

方法二：

func (n *WelcomeController) Index() {
	 type JSONStruct struct {
        Code int
        Msg  string
    }
    func (c *MainController) Get() {
        mystruct := &JSONStruct{0, "hello"}
        c.Data["json"] = mystruct
        c.ServeJSON()
    }
}

大概输出格式：

二，

• Vue使用axios或resource 来请求 beego提供的接口。

1.首先安装axios或

cnpm install --save axios

 

 cnpm install -- save vue-resource

安装后引入两个模块，在main.js引入

使用axios和resource方法，调用后会出现跨域问题，前端截图如下：

前端这样写：js代码

 

 

HTML代码  使用的是 VUE 来实现的

 

                

                  

                    

                      
                      
                    
                    
编号
                    
文本内容
                    
操作
                  
                
                

                  

                    

                      
                    
                    
{{nyy.Id}}
                    
{{nyy.Textnyy}}
                    
{{nyy.Type}}
                    

                      
                        编辑
                      
                      
                        删除
                      
                    
                  
                
              

三，beego 安装cors 模块 go get包

配置代码，放在main.go中 

具体代码如下：

beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
		AllowAllOrigins:  true,
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
		AllowHeaders:     []string{"Origin", "Authorization", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
		ExposeHeaders:    []string{"Content-Length", "Access-Control-Allow-Origin", "Access-Control-Allow-Headers", "Content-Type"},
		AllowCredentials: true,
}))