单页应用中,异步请求数据会受到同源政策限制。

只有当协议端口、和域名都相同的页面,则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。

不仅仅是传统的ajax,基于promise的axios和fetch也会受到限制。解决方法有很多,这里简述一下使用golang搭建一个简单的代理服务。

proxy

用代理实现跨域请求的原理是

DomainA客户端(浏览器) ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端(浏览器)

在页面的同源浏览器搭建一个代理服务,页面请求数据发至同源服务器后,由同源服务器转发到目标服务器,同时等待响应并将响应转发回页面。

实际上,在一些前端框架中,如vue.js,提供了简易的代理服务以供测试。在服务端采用相同的配置,可以非常方便的从开发环境转向生产环境。

httprouter

httprouter是基于golang提供的http包之上封装的非常轻便的http框架。

HttpRouter is a lightweight high performance HTTP request router (also called multiplexer or just mux for short) for Go.

使用httprouter可以非常方便的解析url,添加handler。

go get github.com/julienschmidt/httprouter

主函数内添加要代理的地址和处理函数。

func main() {
    router := httprouter.New()
    router.GET("/", index)
    //以post方式访问/github为前缀的url时,完整的url会转化为参数传入函数
    router.POST("/github/*proxyPath", proxy) 
    log.Fatal(http.ListenAndServe(serverPort, router))
}
func proxy(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
   // /github -> remote
   remote := "https://github.com"
   // 获取完整url
   u := remote + ps.ByName("proxyPath")
   log.Println(r.URL,"=>",u)
   // 以现有的request创建新的request
   req,err := http.NewRequest(r.Method, u , r.Body) /* method url body */
   req.Header = r.Header /* header */
   client := http.DefaultClient
   // 发起新的请求
   res, err := client.Do(req)
   if err != nil {
      w.WriteHeader(404)
      fmt.Fprint(w, err)
      return
   }
   // 获取新的body
   bodyRes,err:=ioutil.ReadAll(res.Body)
   if err!=nil{
      w.WriteHeader(404)
      fmt.Fprint(w, err)
      return
   }
   // 设置新的header
   for k, vs := range res.Header {
      for _, v := range vs {
         w.Header().Add(k,v)
      }
   }
   // 设置新的cookie
   for _, value := range res.Request.Cookies() {
      w.Header().Add(value.Name,value.Value)
   }
   // 写入状态
   w.WriteHeader(res.StatusCode)
   w.Write(bodyRes)
}

特别注意:写出时必须先设置header再写出状态码和body

以post的方式访问我们的代理地址

image

image

查看log

2018/02/22 11:33:07 /github/login/oauth/access_token => https://github.com/login/oauth/access_token

myWsq
84 声望6 粉丝

辣鸡在校大学生