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

只有当

协议、

端口、和

域名都相同的页面，则两个页面具有相同的源。只要网站的 协议名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 .

使用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的方式访问我们的代理地址

查看log

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