单页应用中,异步请求数据会受到同源政策限制。
只有当协议、端口、和域名都相同的页面,则两个页面具有相同的源。只要网站的 协议名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的方式访问我们的代理地址
查看log
2018/02/22 11:33:07 /github/login/oauth/access_token => https://github.com/login/oauth/access_token