CORS (preflight request)에 빠졌으므로 해결 방법을 비망록으로 남겨 둡니다.

오류가 발생한 장면

다른 도메인에서 Http 요청을 보내는 경우 CORS에주의하십시오.
서버측의 응답으로 헤더를 붙여 주면 좋을 것이다.
쉽지.

클라이언트측

뭔가의 데이터를 jason으로 POST한다.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", API_ENDPOINT);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(data));

API 서버 측

서버측에서는, 응답의 헤더를 붙여 준다.

func (a *API) HandleFunc(w http.ResponseWriter, r *http.Request) {
    //略...

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")

    //略...

    fmt.Fprint(w, "ok")
}

결과, 오류 ...!

당연히 결과가 정상적으로 돌아올 것이라고 생각합니다.
프리플라이트 요청? 어쩐지 이렇게 오류가 나왔다. . . 뭐야 이거. . .

Access to XMLHttpRequest at 'http://localhost:8080/api' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

CORS(preflight request) 오류 해결

preflight request란?

요청에 따라 CORS 프리플라이트가 발생하지 않는 경우가 있습니다. 이것을이 기사에서는 "단순 요청"이라고 부르지 만 (CORS를 정의하는) Fetch 사양에서는이 용어를 사용하지 않습니다. '단순 요청'은 다음 조건을 모두 충족합니다.
· 허가되고 있는 메소드의 하나인 것.
GET
HEAD
POST
· 사용자 에이전트가 자동으로 설정 한 헤더 (예 : Connection, User-Agent 또는 Fetch 사양에서 "금지 헤더 이름"으로 정의 된 헤더)를 제외하고 수동으로 설정할 수있는 헤더는 Fetch 사양 에서 "CORS 세이프리스트 요청 헤더"로 정의된 다음 헤더만 있습니다.
Accept
Accept-Language
Content-Language
Content-Type (단, 다음 요구 사항을 충족하는 것)
DPR
다운링크
Save-Data
Viewport-Width
Width
· Content-Type 헤더에는 다음 값만 허용됩니다.
application/x-www-form-urlencoded
multipart/form-data
text/plain
· 요청에 사용되는 XMLHttpRequestUpload에 이벤트 리스너가 등록되어 있지 않습니다. 이들은 XMLHttpRequest.upload를 사용하여 올바르게 액세스됩니다.
· 요청에 ReadableStream 객체가 사용되지 않았습니다.
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / Ht tP / 코 RS # P e f ぃgh d_ rekue sts

위의 조건을 충족하지 않는 것은 preflight request가 메인 요청 전에 발생합니다.
이번에는 POST 하지만 "Content-Type", "application/json" 를 헤더에 붙여서 프리플라이트 요청이 발생했습니다.
이미지의 첫 번째 요청은 프리플라이트 요청입니다.
여기서는 실제로 OPTIONS 메서드가 preflight request로 실행됩니다.

해결 방법

OPTIONS 메소드의 때는, http.StatusOK 를 돌려주도록(듯이) 하면 해결했습니다!

func (a *API) HandleFunc(w http.ResponseWriter, r *http.Request) {
    //略...

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")

    if r.Method == "OPTIONS" {
        w.WriteHeader(http.StatusOK)
        return
    }
    //略...

    fmt.Fprint(w, "ok")
}