vue跨域，復雜請求，后端為beego

關於跨域，網上講得很多，具體實施起來大多講的不詳細，貼我的vue端代碼

require('es6-promise').polyfill()
import fetch from 'isomorphic-fetch'
const tokenstr = '保密'
/**
 * post請求
 * @param  {String} options.url   api地址
 * @param  {String} options.querydata querydata參數
 * @return {Promise}               Promise
 */
const _fetch = ({ url, querydata }, commit) => {
  if (commit) commit('START_LOADING')
  let _url = `http://127.0.0.1:88/v1${url}`
  return fetch(_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Bearer ' + tokenstr
    },
    body: querydata
  })
  .then((res) => {
    if (commit) commit('FINISH_LOADING')
    if (res.status >= 200 && res.status < 300) {
      return res.json()
    }
    return Promise.reject(new Error(res.status))
  })
}

主要是服務端，我的服務端用的是golang的beego框架。

//跨域
func (c *BaseController) AllowCross() {
    c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Origin", "http://localhost:8080")       //允許訪問源
    c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS")    //允許post訪問
    c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Headers", "Content-Type,Authorization") //header的類型
    c.Ctx.ResponseWriter.Header().Set("Access-Control-Max-Age", "1728000")
    c.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Credentials", "true")
    c.Ctx.ResponseWriter.Header().Set("content-type", "application/json") //返回數據格式是json
}

這里在BaseController中寫過函數，其它Controller函數繼承BaseController，並在每個方法中調用下這個函數。

另外，由於我的header用了 ‘Authorization’，這樣屬於復雜請求，對於復雜請求，瀏覽器會自動先發一個options請求，那么在后端路由中也需要加這個options請求的路由，（如果不是用框架，就直接判斷請求類型）

beego.NSNamespace("/*",
            //Options用於跨域復雜請求預檢
            beego.NSRouter("/*", &v1.BaseController{}, "options:Options"),
        ),

BaseController中加入Options的處理方法，（事實上Options返回的內容是啥一點也不重要）

func (c *BaseController) Options() {
    c.AllowCross() //允許跨域
    c.Data["json"] = map[string]interface{}{"status": 200, "message": "ok", "moreinfo": ""}
    c.ServeJSON()
}