gorilla/mux의 CORS 대응

처음으로 golang에서 gorilla/mux를 사용한 API를 만들었습니다만, CORS로 여러가지 빠졌기 때문에 기사로서 정리합니다.

일의 시작



다음과 같은 구현의 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. 프리 플라이트 요청에 대한 응답
필요하다는 것이 었습니다.
대응 내용은 간단하지만 의외로 시간을 필요로 버렸기 때문에, 같은 상황에서 빠져있는 분의 도움이되면 다행입니다.

좋은 웹페이지 즐겨찾기