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

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代码

<script >
export default {
  data() {
    return {
      checkedValue: "",
      list: []
    };
  },
  methods: {
    changeOption: function(e) {
      alert(e);
      var _this = this;
      //alert(_this);
      this.axios
        .get("http://www.go.com/welcomeindex?classif=" + e) //请求接口
        .then(function(response) { //请求成功
          _this.list = response.data; //后台传过来的值 json
          //alert(list);
        })
        .catch(function(error) {
          //请求失败
          console.log(error);
        });
    }
  }
};
</script>

 

 

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

 <table cellspacing="1" style="table-layout: fixed;">
                <thead>
                  <tr>
                    <th class="row-selected row-selected" style="width: 40px;">
                      <input autocomplete="off" type="checkbox" id="checkAll" class="check-all regular-checkbox">
                      <label for="checkAll"></label>
                    </th>
                    <th width="10%">编号</th>
                    <th>文本内容</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="nyy in list">
                    <td>
                      <input autocomplete="off" type="radio" v-bind:value="nyy.Id" name="ids[]" id="check_1">
                    </td>
                    <td title="1">{{nyy.Id}}</td>
                    <td title="123123">{{nyy.Textnyy}}</td>
                    <td title="123123">{{nyy.Type}}</td>
                    <td style="overflow: auto;white-space: normal ">
                      <span>
                        <a target="_self" href>编辑</a>
                      </span>
                      <span>
                        <a class="tr-del" data-url>删除</a>
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>

三，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,
}))