gorilla/mux의 CORS 대응
15952 단어 5고릴라CORSpreflight-request
일의 시작
다음과 같은 구현의 API를 만들었습니다.
main.go
package main
import (
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
getTestestHandler := NewGetTestHandler()
r.HandleFunc("/test", getTestestHandler.Get).Methods("GET")
http.ListenAndServe(":8080", r)
}
get_test_handler.go
package main
import (
"encoding/json"
"net/http"
)
type GetTestHandler struct{}
type TestResponse struct {
Test string
}
func NewGetTestHandler() *GetTestHandler {
return &GetTestHandler{}
}
func (h *GetTestHandler) Get(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(TestResponse{Test: "test"})
}
동작 확인을 위해
html.html를 작성하여 브라우저에서 액세스해 봅니다.test.html
<html>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
console.log(xhr.response);
}
}
xhr.open('GET', "http://localhost:8080/test");
xhr.responseType = 'blob';
xhr.send();
</script>
</html>
브라우저 개발자 도구를 열면 다음과 유사한 오류가 발생합니다.
대응①
No 'Access-Control-Allow-Origin' header is present on the requested resource. 라고 써 있으므로, 어쨌든 헤더를 추가하면 좋을까 생각했습니다.「CORS 헤더」로 검색하면 나오는 헤더를 3개 정도 추가해 보았습니다.
get_test_handler.go
//省略
func (h *GetTestHandler) Get(w http.ResponseWriter, r *http.Request) {
//ヘッダの追加
w.Header().Set("Access-Control-Allow-Headers", "*")
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(TestResponse{Test: "test"})
}
그리고 다시 확인해 보면,
오류는 변하지 않으며 잘 보면 헤더가 추가되지 않았습니다.
대응②
시험에 TalendAPI로 요청해 보면
헤더가 붙어 있습니까? 왜?
그렇다고 여러가지 조사해 보았는데, 프리플라이트 요청 에의 응답이 필요하다고 판명했습니다.
그래서 OPTIONS 요청에 응답할 수 있도록 소스 코드를 변경해 보았습니다.
(이어서 handler의 공통 처리를 갖게 한다
test_handler.go 를 작성)main.go
package main
import (
"net/http"
"github.com/gorilla/mux"
)
func main() {
r := mux.NewRouter()
getTestestHandler := NewGetTestHandler()
//Methodsに"OPTIONS"を追加
r.HandleFunc("/test", TestHandler(testHandler.Get)).Methods("GET", "OPTIONS")
http.ListenAndServe(":8080", r)
}
get_test_handler.go
//省略
func (h *GetTestHandler) Get(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(TestResponse{Test: "test"})
}
test_handler.go
package main
import (
"net/http"
)
type TestHandle func(w http.ResponseWriter, r *http.Request)
func TestHandler(handle TestHandle) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
//ヘッダの追加
w.Header().Set("Access-Control-Allow-Headers", "*")
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
//プリフライトリクエストへの応答
if r.Method == "OPTIONS" {
w.WriteHeader(http.StatusOK)
return
}
//Handler関数の実行
handle(w, r)
}
}
라는 것으로 확인해 보면.
마침내 완료되었습니다.
요약
CORS에 대응하려면,
1. 헤더 부여
2. 프리 플라이트 요청에 대한 응답
필요하다는 것이 었습니다.
대응 내용은 간단하지만 의외로 시간을 필요로 버렸기 때문에, 같은 상황에서 빠져있는 분의 도움이되면 다행입니다.
Reference
이 문제에 관하여(gorilla/mux의 CORS 대응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akaonisan/items/60bc0cce6eaed4f5b4ba텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
