CORS:解决跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误

最近客串后端写个小服务,编程语言为golang。

前端发送http POST请求后,发现报错,而后端没有收到POST请求,反而收到了OPTIONS请求。

经过一番调查发现,当前端发送诸如包含“application/json”的非简单请求时,会先发送一个OPTIONS请求,此请求称之为“预检请求”。当前端对OPTIONS请求验证通过后,再发送最终需要发送的http请求。

关于CORS网上介绍非常丰富,不再赘述,占用篇幅。个人认为下文写的非常详细,仅作参考:

http://www.ruanyifeng.com/blog/2016/04/cors.html

那么到这里,情况就明朗了,后端的锅嘛!响应OPTIONS请求就可以啦。

 1. 甄别OPTIONS请求

func (self *ServerHandler) doDealRequest(w http.ResponseWriter, r *http.Request) {
    if r.Method == "OPTIONS" {
		responseCORS(w)
		return
	}
    // other request
}

2. 响应OPTIONS请求

func responseCORS(w http.ResponseWriter) {
    // 自定义类型,仅有下面两个成员
	var resp Response
	resp.Description = "ok"
	resp.Code = http.StatusOK

	w.Header().Set("Access-Control-Allow-Methods", "GET;POST")
    // 响应所以域的请求,偷懒,且比较危险
	w.Header().Set("Access-Control-Allow-Origin", "*")
    // 由于前端的POST请求为json,所以后端这里特别注明一下
	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
	w.Header().Set("Content-Type", "application/json")
	w.WriteHeader(http.StatusOK)

	jsonStr,_ := json.Marshal(resp)
	w.Write(jsonStr)
}

整个过程最重要的是如何响应OPTIONS请求,必须要在response中明确指出:

                 Access-Control-Allow-Methods

                 Access-Control-Allow-Origin

                 Access-Control-Allow-Headers

                 Content-Type // 这一字段可以省略

当然语言不同,写法不同,其他语言请自行查找。

 

3. 打完收工

起名废,勿喷!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章